How to display ripple animation on google map in Android?

Question

I'm trying to set ripple animation on google map using specific Lat-Lng, please see this which exactly describes what I wants, I referred above link but unable to set animation on google map.

What I tried so far is-

My xml code:

<com.test.custom.RippleBackground
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rippleLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:rb_color="#0099CC"
        app:rb_duration="5000"        
        app:rb_radius="32dp"
        app:rb_rippleAmount="4"
        app:rb_scale="6" >

        <ImageView
            android:id="@+id/imgMapProfile"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_profile_active" />
    </com.test.custom.RippleBackground>

My Java code to place ripple on google map:

 LatLng currentAddressLatLong;              
                        currentAddressLatLong = new LatLng(gps.getLatitude(), gps.getLongitude());

                    RippleBackground rippleLayout=(RippleBackground)findViewById(R.id.rippleLayout);
                    rippleLayout.setVisibility(View.VISIBLE);
                    ImageView imgMapProfile=(ImageView)findViewById(R.id.imgMapProfile);

                    Bitmap markerUserBitmap = Comman.createDrawableFromView(NearByActivity.this, rippleLayout);
                    googleMap.addMarker(new MarkerOptions().position(currentAddressLatLong).icon(BitmapDescriptorFactory.fromBitmap(markerUserBitmap)));
                    googleMap.moveCamera(CameraUpdateFactory.newLatLng(currentAddressLatLong));
                    googleMap.animateCamera(CameraUpdateFactory.zoomTo(11));

                    rippleLayout.startRippleAnimation();

     // Convert a view to bitmap function
            public static Bitmap createDrawableFromView(Context context, View view) 
            {
                DisplayMetrics displayMetrics = new DisplayMetrics();
                ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
                view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
                view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
                view.buildDrawingCache();
                Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

                Canvas canvas = new Canvas(bitmap);
                view.draw(canvas);

                return bitmap;
            }

But the bitmap is not getting animate. please help. thanks a lot.

Answer 1

create file in animfolder sclae_fade.xml

<alpha
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="1.0"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    />

create circle_pulse.xml file in drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#5532a9f3"/>
            <size
                android:width="120dp"
                android:height="120dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke android:color="@android:color/transparent"
                android:width="30dp"/>
            <solid android:color="#32a9f3"/>
            <size
                android:width="90dp"
                android:height="90dp"/>
        </shape>
    </item>
</layer-list>

now set animation

Animation logoMoveAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_fade);
image_view.startAnimation(logoMoveAnimation);

Answer 2

Thanks to yeldos I just modfiy his code for adding a fade out effect at the end of the animation.

Add this line inside the overlay function

groundOverlay.setTransparency(animatedFraction);

Just below

groundOverlay.setDimensions(i);

Answer 3

For everyone who wants to create ripple background in google map like this

1. Create 3 GroundOverlay with same circle. Put image in drawable folder
2. Create Value Animator
3. Send 3 GroundOverlay in ValueAnimator periodically Below code: Inside onCreateView

 new Handler().postDelayed(new Runnable() {
                   @Override public void run() {final GroundOverlay groundOverlay11=googleMap.addGroundOverlay(new
        GroundOverlayOptions()
                           .position(latLng, 2000)
                           .transparency(0.5f)
                           .image(BitmapDescriptorFactory.fromResource(R.drawable.krug)));
                    OverLay(groundOverlay11);
                   }
                  }, 0);

    new Handler().postDelayed(new Runnable() {
       @Override
       public void run() {
        final GroundOverlay groundOverlay1=googleMap.addGroundOverlay(new GroundOverlayOptions()
                .position(latLng, 2000)
                .transparency(0.5f)
                .image(BitmapDescriptorFactory.fromResource(R.drawable.krug)));
        OverLay(groundOverlay1);
       }
      }, 4000);

    new Handler().postDelayed(new Runnable() {
       @Override
       public void run() {
        final GroundOverlay groundOverlay2=googleMap.addGroundOverlay(new GroundOverlayOptions()
                .position(latLng, 2000)
                .transparency(0.5f)
                .image(BitmapDescriptorFactory.fromResource(R.drawable.krug)));
        OverLay(groundOverlay2);
       }
      }, 8000);

And Overlay class:

public void OverLay(final GroundOverlay groundOverlay){
  vAnimator = ValueAnimator.ofInt(0, 2000);
  int r=99999;
  vAnimator.setRepeatCount(r);
  //vAnimator.setIntValues(0, 500);
  vAnimator.setDuration(12000);
  vAnimator.setEvaluator(new IntEvaluator());
  vAnimator.setInterpolator(new LinearInterpolator());
  vAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator valueAnimator) {
    float animatedFraction = valueAnimator.getAnimatedFraction();
    Integer i = (Integer) valueAnimator.getAnimatedValue();
    groundOverlay.setDimensions(i);
   }
  });
  vAnimator.start();
 }

Answer 4

There is an android library to show ripple effects on google maps. Using this library, just 2 line of code is needed to show ripple effect on google maps as per your question. Please visit this link for the library to show ripple: https://github.com/aarsy/GoogleMapsRippleEffect