How to animate marker when it is added to map on Android?

Question

I want to animate map markers when they are added to map.

User should see the map with markers around him. Each new marker should bounce.

Answer 1

You can implement the onMarkerClick() and make the marker bounce whenever user clicks on it. Just try out below code implementation. I have tried it and it works totally fine.

 private Marker mPerth;  
 private Marker mPerth = mMap.addMarker(new MarkerOptions()
             .position(PERTH)
            .title("Perth")
            .snippet("Population: 1,738,800"));        

  @Override   
public boolean onMarkerClick(final Marker marker) 
  {
      // This causes the marker at Perth to bounce into position when it is clicked.
    if (marker.equals(mPerth)) {
        final Handler handler = new Handler();
        final long start = SystemClock.uptimeMillis();
        Projection proj = mMap.getProjection();
        Point startPoint = proj.toScreenLocation(PERTH);
        startPoint.offset(0, -100);
        final LatLng startLatLng = proj.fromScreenLocation(startPoint);
        final long duration = 1500;
        final Interpolator interpolator = new BounceInterpolator();
        handler.post(new Runnable() {
            @Override
            public void run() {
                long elapsed = SystemClock.uptimeMillis() - start;
                float t = interpolator.getInterpolation((float) elapsed / duration);
                double lng = t * PERTH.longitude + (1 - t) * startLatLng.longitude;
                double lat = t * PERTH.latitude + (1 - t) * startLatLng.latitude;
                marker.setPosition(new LatLng(lat, lng));
                if (t < 1.0) {
                    // Post again 16ms later.
                    handler.postDelayed(this, 16);
                }
            }
        });
    }
    // We return false to indicate that we have not consumed the event and that we wish
    // for the default behavior to occur (which is for the camera to move such that the
    // marker is centered and for the marker's info window to open, if it has one).
    return false;
}

You can also use this at the time of adding the marker in your application besides onClick event. I hope this what you want only.

Answer 2

Anchor the marker off screen or at your start position then start the animation.

Note the .setAnchor used in this method was added to the google map api v2 in May 2013

I've just now got this working for one marker by tweaking the extras samples maps demo and I don't like the performance of this implementation. The most important piece is to anchor the marker off screen or off at your start position. I'm using off screen above.

Anchor the marker off screen .setAnchor(.5f,(size of screen above marker / size of marker )) //for the map demo perth is about 6f for my test phone. Change the animation to bounce to the same value it was 6f for my test phone.

private void addMarkersToMap() {
    // A few more markers for good measure.
mPerth = mMap.addMarker(new MarkerOptions().position(PERTH)
            .title("Perth").snippet("Population: 1,738,800")
            .anchor(.5f, 6f)
            );

Change the animation so it bounces to (size of screen above marker/size of marker) (6f on my test phone). I'm just using the onclick handler because it's already setup to bounce with tweaks bounce to 6f and a longer duration. So after all the markers have been added to the map I fire off the click handler.

this.onMarkerClick(mPerth);

The changed onMarkerClick handler with the 6f and longer duration.

@Override
public boolean onMarkerClick(final Marker marker) {
    if (marker.equals(mPerth)) {
        // This causes the marker at Perth to bounce into position when it
        // is clicked.
        final Handler handler = new Handler();
        final long start = SystemClock.uptimeMillis();
        final long duration = 2500;

        final Interpolator interpolator = new BounceInterpolator();

        handler.post(new Runnable() {
            @Override
            public void run() {
                long elapsed = SystemClock.uptimeMillis() - start;
                float t = Math.max(
                        1 - interpolator.getInterpolation((float) elapsed
                                / duration), 0);

                marker.setAnchor(0.5f, 1.0f + 6 * t);

                if (t > 0.0) {
                    // Post again 16ms later.
                    handler.postDelayed(this, 16);
                }
            }
        });
    } else if (marker.equals(mAdelaide)) {
        // This causes the marker at Adelaide to change color.
        marker.setIcon(BitmapDescriptorFactory.defaultMarker(new Random()
                .nextFloat() * 360));
    }
    // We return false to indicate that we have not consumed the event and
    // that we wish
    // for the default behavior to occur (which is for the camera to move
    // such that the
    // marker is centered and for the marker's info window to open, if it
    // has one).
    return false;
}

Good Luck

Answer 3

You can add any new layout to MapView as map marker:

public void AddAnimMarkerToMap(MapView map, GeoPoint geoPoint, int id, int animResId)
{
    var layoutParams = new MapView.LayoutParams(ViewGroup.LayoutParams.WrapContent,
                                                ViewGroup.LayoutParams.WrapContent,
                                                geoPoint,
                                                MapView.LayoutParams.Center);

    var ll = new LinearLayout(map.Context) { Id = id, Orientation = Orientation.Vertical };
    ll.SetGravity(GravityFlags.Center);

    var iv = new ImageView(map.Context);
    iv.SetImageResource(animResId);

    ll.AddView(iv);
    map.AddView(ll, layoutParams);

    var markerAnimation = (AnimationDrawable)iv.Drawable;
    markerAnimation.Start();
    ll.LayoutParameters = layoutParams;
}

probably you can add ImageView directly without wraping layout. animResId is the Frame animation drawable resource (similar as Android Mylocation marker).

http://developer.android.com/guide/topics/resources/animation-resource.html#Frame