How to animate an Icon in markerOptions? [GoogleMaps API]

Question

Is there a way how to animate an Icon? I need to apply a "wave" animation to my custom drawable marker on my Google Map. Any suggestions are very well welcomed!

Note.: My plan now is to run a handler worker thread that will constantly call the "setIcon" method and thus animate the icon.

Desired effect:

My icon drawable:

XML:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#0093e8"/>
    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

This is my onMapReady method:

@Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        mDotMarkerBitmap = generateBitmapFromDrawable();
        markerOptions = new MarkerOptions()
                .position(xDesign)
                .title("xDesign in Edinburgh")
                .icon(BitmapDescriptorFactory.fromBitmap(mDotMarkerBitmap));
        mXDesignMarker = mMap.addMarker(markerOptions);


        BitmapDescriptor bitmapDescriptor = markerOptions.getIcon();


        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setDuration(1000);
        AnimationSet animation = new AnimationSet(true);
        animation.addAnimation(fadeOut);

        //   Icons dont have animate method     icon.setAnimation(animation);

        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(xDesign, 15));
    }

My generateBitmapFromDrawable method:

private Bitmap generateBitmapFromDrawable() {
    int px = getResources().getDimensionPixelSize(R.dimen.map_dot_marker_size);
    Bitmap mDotMarkerBitmap = Bitmap.createBitmap(px, px, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(mDotMarkerBitmap);
    Drawable shape = getResources().getDrawable(R.drawable.circle_drawable);
    shape.setBounds(0, 0, mDotMarkerBitmap.getWidth(), mDotMarkerBitmap.getHeight());
    shape.draw(canvas);
    return mDotMarkerBitmap;
}

This is called ripple effect, there are some custom libraries,http://stackoverflow.com/questions/26604134/how-to-achieve-ripple-animation-using-support-library — Antonios Tsimourtos, Jul 12 '16 at 14:30

score 3 · Accepted Answer · answered Jul 26 '16 at 14:59

What I did I used this custom animation class:

public class RadiusAnimation extends Animation {
    private GroundOverlay groundOverlay;
    private final int startingSize = 100;

    public RadiusAnimation(GroundOverlay groundOverlay) {
        this.groundOverlay = groundOverlay;

    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        groundOverlay.setDimensions((startingSize * interpolatedTime));
        groundOverlay.setTransparency(interpolatedTime);

    }


    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
    }
}

And then in my mapFragment:

public class MapFragment extends Fragment implements OnMapReadyCallback {

    private RadiusAnimation groundAnimation;
    private AnimationSet breadingAnimations;

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        rippleBackground = new RippleBackground(getActivity());
        rippleBackground.setBackgroundColor(ContextCompat.getColor(getActivity(),
                R.color.pulseMarker1));

        mapFragment = (SupportMapFragment) getChildFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);

        breadingAnimations = new AnimationSet(false);
    }

@Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
//Add smallest image drawable overlay

        Bitmap mDotMarkerBitmap1 = generateBitmapFromDrawable(R.drawable.circle_drawable);

        final int widthOne = 80;
        final int animationDurationOne = 1200;

        GroundOverlay groundOverlay1 = mMap.addGroundOverlay(new GroundOverlayOptions()
                .image(BitmapDescriptorFactory.fromBitmap(mDotMarkerBitmap1))
                .position(xDesign, widthOne));

        groundAnimation = new RadiusAnimation(groundOverlay1);
        groundAnimation.setRepeatCount(Animation.INFINITE);
        groundAnimation.setRepeatMode(Animation.RESTART);

        groundAnimation.setDuration(animationDurationOne);
//        groundAnimation.setStartOffset(700);
        breadingAnimations.addAnimation(groundAnimation);


        Bitmap mDotMarkerBitmap2 = generateBitmapFromDrawable(R.drawable.circle_drawable2);
        final int widthTwo = 200;
        final int animationDurationTwo = 2000;
        GroundOverlay groundOverlay2 = mMap.addGroundOverlay(new GroundOverlayOptions()
                .image(BitmapDescriptorFactory.fromBitmap(mDotMarkerBitmap2))
                .position(xDesign, widthTwo));

        Animation groundAnimation2 = new RadiusAnimation(groundOverlay2);
        groundAnimation2.setRepeatCount(Animation.INFINITE);
        groundAnimation2.setRepeatMode(Animation.RESTART);
        groundAnimation2.setDuration(animationDurationTwo);
//        groundAnimation2.setStartOffset(1500);
        breadingAnimations.addAnimation(groundAnimation2);


        Bitmap mDotMarkerBitmap3 = generateBitmapFromDrawable(R.drawable.circle_drawable3);
        final int widthThree = 300;
        final int animationDurationThree = 3000;
        GroundOverlay groundOverlay3 = mMap.addGroundOverlay(new GroundOverlayOptions()
                .image(BitmapDescriptorFactory.fromBitmap(mDotMarkerBitmap3))
                .position(xDesign, widthThree));

        Animation groundAnimation3 = new RadiusAnimation(groundOverlay3);
        groundAnimation3.setRepeatCount(Animation.INFINITE);
        groundAnimation3.setRepeatMode(Animation.RESTART);
//        groundAnimation3.setStartOffset(500);
        groundAnimation3.setDuration(animationDurationThree);

        breadingAnimations.addAnimation(groundAnimation3);

        mapFragment.getView().startAnimation(breadingAnimations); // start animation


        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(xDesign, zoomLeval));
    }

    private void logThis(String message) {
        Log.d(TAG, message);
    }

    @NonNull
    private Bitmap generateBitmapFromDrawable(int drawablesRes) {
        int px = getResources().getDimensionPixelSize(R.dimen.map_dot_marker_size);
        Bitmap mDotMarkerBitmap = Bitmap.createBitmap(px, px, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mDotMarkerBitmap);
        Drawable shape = getResources().getDrawable(drawablesRes);
        shape.setBounds(0, 0, mDotMarkerBitmap.getWidth(), mDotMarkerBitmap.getHeight());
        shape.draw(canvas);
        return mDotMarkerBitmap;
    }


}

RippleBackground ? you didn't describe this class here !! – Abhijeet Jun 30 '20 at 06:07 — Abhijeet, Jun 30 '20 at 06:07

SaravInfern · Answer 2 · 2016-07-25T08:20:42.117

Hi you can create your desired wave animation in xml itself

circle_drawable.xml

 <animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/image1" android:duration="50" />
    <item android:drawable="@drawable/image2" android:duration="50" />
    <item android:drawable="@drawable/image3" android:duration="50" />//you can add more xmls and alter the duration to make the animation look good
 </animation-list>

image1.xml

<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
   <solid
    android:color="@color/dark_blue"/>
   <size
    android:width="60dp"
    android:height="60dp"/>
</shape>

image2.xml

<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
   <solid
    android:color="@color/blue"/>
   <size
    android:width="90dp"
    android:height="90dp"/>
</shape>

image3.xml

<shape
     xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
       android:color="@color/blue"/>
    <size
    android:width="120dp"
    android:height="120dp"/>
</shape>

finally add the drawable as marker in your code

private Bitmap generateBitmapFromDrawable() {
    int px = getResources().getDimensionPixelSize(R.dimen.map_dot_marker_size);
    Bitmap mDotMarkerBitmap = Bitmap.createBitmap(px, px, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(mDotMarkerBitmap);
    Drawable shape = getResources().getDrawable(R.drawable.circle_drawable);
    shape.setBounds(0, 0, mDotMarkerBitmap.getWidth(), mDotMarkerBitmap.getHeight());
    shape.draw(canvas);

     // Get the background, which has been compiled to an AnimationDrawable object.
//Edited:
         AnimationDrawable frameAnimation = (AnimationDrawable) view.getBackground(); //view is the marker

 // Start the animation (looped playback by default).

 frameAnimation.start();

    return mDotMarkerBitmap;
}

reference https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html

Thank you for your suggestion. I did try it but unfortunately, I cannot see any animation playing. It is just one static blue solid circle :/ — Georgi Koemdzhiev, Jul 12 '16 at 15:02
Thanks but the Marker class do not have method getBackground() or anything like that that is why I cannot apply your suggestion :/ — Georgi Koemdzhiev, Jul 12 '16 at 15:16
@Saravnfern not entirely but since it was the only answer I am accepting it. Thank you for the help again! :) — Georgi Koemdzhiev, Jul 26 '16 at 07:50

How to animate an Icon in markerOptions? [GoogleMaps API]

2 Answers2