Georgi Koemdzhiev Georgi Koemdzhiev - 4 months ago 21
Android Question

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

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:

enter image description here

My icon drawable:

enter image description here

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

Answer

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


}
Comments