Leo Wiki Leo Wiki - 3 months ago 34
Android Question

How to display ripple animation on google map in Android?

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

For everyone who want to create ripple background in google map like this enter image description here

  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();
 }