Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 948
Leo Wiki Avatar asked Nov 20 '15 06:11

Leo Wiki


People also ask

What is Android ripple effect?

The touch feedback in Android is a must whenever the user clicks on the item or button ripple effect when clicking on the same, gives confidence to the user that the button has been clicked so that they can wait for the next interaction of the app.


2 Answers

For everyone who wants 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();
 }
like image 52
Yeldos Avatar answered Sep 29 '22 21:09

Yeldos


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);
like image 20
Vodet Avatar answered Sep 29 '22 22:09

Vodet