How to implement Drop pin animation in android using google maps?

Question

I want to implement dropping pins animation to markers as the one in iPhone. The problem is pins are not dropping the way they should as they are in this link : http://googlege

Answer 1

The best way to animate items on the MapView is not using Views, but animating the overlay.

Here's a class I made to handle animating map markers to replicate the behaviour of the nice effect you get on the iPhone. In this case I was adding markers to indicate businesses so where it says 'Business' it is just referring to a marker. This code hasn't been tested on many devices. I know there can be some issues with the projection class which might cause issues so don't take this code as stable and treat accordingly.

import java.util.ArrayList;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.AsyncTask;
import android.widget.AdapterView.OnItemClickListener;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

public class MarkerOverlay extends Overlay {
    private ArrayList<Business> mOverlays = new ArrayList<Business>();
    private Bitmap mBitmapMarker;
    private Bitmap mBitmapShadow;

    DropMarkersTask animateMarkers;
    OnItemClickListener itemClickedListener;

    public MarkerOverlay(Bitmap defaultMarker) {
        mBitmapMarker = defaultMarker;

        // Create shadow bitmap. Basically a black version of the image
        mBitmapShadow = defaultMarker.copy(Bitmap.Config.ARGB_8888, true);
        for(int x = 0;x < mBitmapShadow.getWidth();x++)
            for(int y = 0;y < mBitmapShadow.getHeight();y++)
                if(mBitmapShadow.getPixel(x, y) != Color.TRANSPARENT) // This is a little lazy but it works
                    mBitmapShadow.setPixel(x, y, Color.BLACK);
    }

    public void setOnItemClickListener(OnItemClickListener clickListener) {
        this.itemClickedListener = clickListener;
    }

    public void addBusiness(Business overlay) {
        for(Business business : mOverlays) {
            if(overlay.getPoint().getLatitudeE6() == business.getPoint().getLatitudeE6() && 
                    overlay.getPoint().getLongitudeE6() == overlay.getPoint().getLongitudeE6()) {
                // Don't add any markers which exist at exactly the same location, chances are it's the same marker
                return;
            } else if (overlay.getPoint().getLatitudeE6() > business.getPoint().getLatitudeE6()) {
                // This is so all the markers are listed top to bottom
                mOverlays.add(mOverlays.indexOf(business), overlay);
                return;
            }
        }
        mOverlays.add(overlay);
    }

    public Business getItem(int position) {
        return mOverlays.get(position);
    }

    @Override
    public void draw(Canvas canvas, MapView mapView, boolean shadow) {

        super.draw(canvas, mapView, shadow);
        Projection projection = mapView.getProjection();
        boolean animationRequired = false;

        // Find the bounds in which the markers must reside to be displayed
        GeoPoint bottomLeft = projection.fromPixels(- mBitmapMarker.getWidth() / 2, mapView.getHeight() + mBitmapMarker.getHeight());
        GeoPoint topRight = projection.fromPixels(mapView.getWidth() + mBitmapMarker.getWidth() / 2, 0);

        for(Business business : mOverlays) {
            // Check to ensure the marker is inside the bounds
            if(business.getPoint().getLatitudeE6() > bottomLeft.getLatitudeE6() && business.getPoint().getLatitudeE6() < topRight.getLatitudeE6() 
                    && business.getPoint().getLongitudeE6() > bottomLeft.getLongitudeE6() && business.getPoint().getLongitudeE6() < topRight.getLongitudeE6()) {
                if(business.isNewPoint()) {
                    business.setOffset(mapView.getHeight());
                    business.setOldPoint();
                }
                Point pt = new Point();
                projection.toPixels(business.getPoint() ,pt);

                if(shadow) {
                    // Set the location of the shadow according to the offset so it appears to come in from the top right
                    pt.x = pt.x + (mBitmapMarker.getWidth() / 4) + ((int)business.getOffset() / 2);
                    pt.y = pt.y - (mBitmapMarker.getHeight() / 2) - ((int)business.getOffset() / 2);

                    // Skew the shadow and set the location
                    Matrix matrix = new Matrix();
                    matrix.preSkew(-0.8f, 0f);
                    matrix.preScale(1f, 0.5f);
                    matrix.postTranslate(pt.x, pt.y);

                    // Change transparency according to the offset
                    Paint paint = new Paint();
                    paint.setAlpha((int)(((mapView.getHeight() - business.getOffset()) / mapView.getHeight()) * 100));

                    // Draw it
                    canvas.drawBitmap(mBitmapShadow, matrix, paint);
                } else {
                    // Set the position according to the offset
                    pt.x = pt.x - (mBitmapMarker.getWidth() / 2);
                    pt.y = pt.y - mBitmapMarker.getHeight() - (int)business.getOffset();

                    canvas.drawBitmap(mBitmapMarker, (float)pt.x, (float)pt.y, null);

                    if(business.getOffset() > 0) {
                        animationRequired = true;
                    }
                }
            }
        }

        // Start the animation task if it hasn't already been started
        if(animationRequired && (animateMarkers == null || animateMarkers.getStatus() != AsyncTask.Status.RUNNING)) {
            animateMarkers = new DropMarkersTask();
            animateMarkers.execute(mapView);
        }
    }

    @Override
    public boolean onTap(GeoPoint point, MapView map) {
        if(itemClickedListener == null) {
            return false;
        }

        Projection projection = map.getProjection();
        int imageWidth = mBitmapMarker.getWidth();
        int imageHeight = mBitmapMarker.getHeight();

        // Find the point on the screen which has been clicked
        Point clickPoint = new Point();
        projection.toPixels(point, clickPoint);

        // Go backwards through the businesses and find out if the location falls within their marker
        for(int i = mOverlays.size() - 1; i >= 0; i--) {
            Business business = mOverlays.get(i);
            Point businessPoint = new Point();
            projection.toPixels(business.getPoint(), businessPoint);
            if(businessPoint.x > 0 && businessPoint.x < map.getWidth() &&
                    businessPoint.y > 0 && businessPoint.y < map.getHeight()) {
                // Point is visible, so may clicked
                int left = businessPoint.x - (imageWidth / 2);
                int right = businessPoint.x + (imageWidth / 2);
                int top = businessPoint.y - imageHeight;
                int bottom = businessPoint.y;

                if(clickPoint.x >= left && clickPoint.x <= right && clickPoint.y >= top && clickPoint.y <= bottom) { // Item has been clicked                   
                    // Adapter will be null as this isn't one. We will return the map 
                    // in the view for consistency but most importantly the index of the item
                    itemClickedListener.onItemClick(null, map, i, 0);
                    return true;
                }
            }

        }

        return false;
    }

    class DropMarkersTask extends AsyncTask<MapView, Void, Void> {
        MapView mapView;

        @Override
        protected Void doInBackground(MapView... mapViews) {
            mapView = mapViews[0];
            boolean mapUpdate = true;

            try {
                while(mapUpdate) {
                    Projection projection = mapView.getProjection();
                    GeoPoint bottomLeft = projection.fromPixels(- mBitmapMarker.getWidth() / 2, mapView.getHeight() + mBitmapMarker.getHeight());
                    GeoPoint topRight = projection.fromPixels(mapView.getWidth() + mBitmapMarker.getWidth() / 2, 0);
                    mapUpdate = false;

                    // Any visible markers with an offset higher than zero must be falling and therefore must be moved.
                    for(Business business : mOverlays) {
                        if(business.getPoint().getLatitudeE6() > bottomLeft.getLatitudeE6() && business.getPoint().getLatitudeE6() < topRight.getLatitudeE6() 
                                && business.getPoint().getLongitudeE6() > bottomLeft.getLongitudeE6() && business.getPoint().getLongitudeE6() < topRight.getLongitudeE6()) {
                            if(business.getOffset() > 0) {
                                // A nice Quadratic fall curve.
                                double currentY = Math.sqrt(mapView.getHeight() - business.getOffset());
                                currentY = currentY + 0.5;
                                double dropDistance = Math.pow(currentY, 2);
                                double newOffset = mapView.getHeight() - dropDistance;
                                if(newOffset < 0) { // Marker can't have an offset less than zero
                                    newOffset = 0;
                                }
                                business.setOffset(newOffset);
                                mapUpdate = true;
                            }
                        }
                    }

                    if(mapUpdate) {
                        this.publishProgress();
                        Thread.sleep(20);
                    }
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            return null;
        }

        @Override
        protected void onProgressUpdate(Void... unused) {
            mapView.postInvalidate();
        }
    }
}

Setting up the overlay (most likely in your onCreate method):

    mapBusinesses = (EventMapView)findViewById(R.id.mapBusinesses);

    mapOverlays = mapBusinesses.getOverlays();

    Bitmap drawable = BitmapFactory.decodeResource(this.getResources(), R.drawable.map_pin);
    businessMarkerOverlay = new MarkerOverlay(drawable);
    businessMarkerOverlay.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapter, View view, int position, long id) {
            Business business = businessMarkerOverlay.getItem(position);
            AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.class);
            dialog.setTitle(business.getBusiness());
            dialog.show();
        }
    });
    mapOverlays.add(businessMarkerOverlay);

Adding a new marker: Don't forget to call postInvalidate on the map to kick off the first draw when the map it otherwise idle.

businessMarkerOverlay.addBusiness(business);
mapBusinesses.postInvalidate();

Lastly, this is the class I used for the Business object:

public class Business {
    private String _business;
    private int _businessId;
    private GeoPoint _point;

    private boolean _newPoint;
    private double _offset;

    public Business(GeoPoint point, String business, int businessId) {
        _point = point;
        _business = business;
        _businessId = businessId;
        _newPoint = true;
    }

    public int getBusinessId() { return _businessId; }
    public String getBusiness() { return _business; }
    public GeoPoint getPoint() { return _point; }
    public boolean isNewPoint() { return _newPoint; }
    public double getOffset() { return _offset; }

    public void setOldPoint() { _newPoint = false; }
    public void setOffset(double offset) { _offset = offset; }
}

Answer 2

Scott. I love your example but you have bounds calculation a little bit off.

Here's how it should be.

import java.util.ArrayList;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import android.os.AsyncTask;
import android.widget.AdapterView.OnItemClickListener;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

public class MarkerOverlay extends Overlay {
    private ArrayList<Business> mOverlays = new ArrayList<Business>();
    private Bitmap mBitmapMarker;
    private Bitmap mBitmapShadow;

    DropMarkersTask animateMarkers;
    OnItemClickListener itemClickedListener;

    public MarkerOverlay(Bitmap defaultMarker) {
        mBitmapMarker = defaultMarker;

        // Create shadow bitmap. Basically a black version of the image
        mBitmapShadow = defaultMarker.copy(Bitmap.Config.ARGB_8888, true);
        for(int x = 0;x < mBitmapShadow.getWidth();x++)
            for(int y = 0;y < mBitmapShadow.getHeight();y++)
                if(mBitmapShadow.getPixel(x, y) != Color.TRANSPARENT) // This is a little lazy but it works
                    mBitmapShadow.setPixel(x, y, Color.BLACK);
    }

    public void setOnItemClickListener(OnItemClickListener clickListener) {
        this.itemClickedListener = clickListener;
    }

    public void addBusiness(Business overlay) {
        for(Business business : mOverlays) {
            if(overlay.getPoint().getLatitudeE6() == business.getPoint().getLatitudeE6() && 
                    overlay.getPoint().getLongitudeE6() == overlay.getPoint().getLongitudeE6()) {
                // Don't add any markers which exist at exactly the same location, chances are it's the same marker
                return;
            } else if (overlay.getPoint().getLatitudeE6() > business.getPoint().getLatitudeE6()) {
                // This is so all the markers are listed top to bottom
                mOverlays.add(mOverlays.indexOf(business), overlay);
                return;
            }
        }
        mOverlays.add(overlay);
    }

    public Business getItem(int position) {
        return mOverlays.get(position);
    }

    public static Rect getMapDrawingRect(MapView mapView, Bitmap marker) {
        Rect mapDrawRect = new Rect();
        mapView.getDrawingRect(mapDrawRect);
        mapDrawRect.left = mapDrawRect.left - marker.getWidth(); // full marker width to include shadow
        mapDrawRect.right = mapDrawRect.right + marker.getWidth()/2; 
        mapDrawRect.bottom = mapDrawRect.bottom + marker.getHeight(); // full height of marker
        return mapDrawRect;
    }

    @Override
    public void draw(Canvas canvas, MapView mapView, boolean shadow) {
        super.draw(canvas, mapView, shadow);

        Projection projection = mapView.getProjection();
        boolean animationRequired = false;

        Rect mapDrawRect = getMapDrawingRect(mapView, mBitmapMarker);
        for(Business business : mOverlays) {
            Point outPoint = new Point();
            projection.toPixels(business.getPoint(), outPoint);
            if (!mapDrawRect.contains(outPoint.x, outPoint.y)) {
                continue;
            }

            if(business.isNewPoint()) {
                business.setOffset(mapView.getHeight());
                business.setOldPoint();
            }
            Point pt = new Point();
            projection.toPixels(business.getPoint() ,pt);

            if(shadow) {
                // Set the location of the shadow according to the offset so it appears to come in from the top right
                pt.x = pt.x + (mBitmapMarker.getWidth() / 4) + ((int)business.getOffset() / 2);
                pt.y = pt.y - (mBitmapMarker.getHeight() / 2) - ((int)business.getOffset() / 2);

                // Skew the shadow and set the location
                Matrix matrix = new Matrix();
                matrix.preSkew(-0.8f, 0f);
                matrix.preScale(1f, 0.5f);
                matrix.postTranslate(pt.x, pt.y);

                // Change transparency according to the offset
                Paint paint = new Paint();
                paint.setAlpha((int)(((mapView.getHeight() - business.getOffset()) / mapView.getHeight()) * 100));

                // Draw it
                canvas.drawBitmap(mBitmapShadow, matrix, paint);
            } else {
                // Set the position according to the offset
                pt.x = pt.x - (mBitmapMarker.getWidth() / 2);
                pt.y = pt.y - mBitmapMarker.getHeight() - (int)business.getOffset();

                canvas.drawBitmap(mBitmapMarker, (float)pt.x, (float)pt.y, null);
                if(business.getOffset() > 0) {
                    animationRequired = true;
                }
            }
        }

        // Start the animation task if it hasn't already been started
        if(animationRequired && (animateMarkers == null || animateMarkers.getStatus() != AsyncTask.Status.RUNNING)) {
            animateMarkers = new DropMarkersTask();
            animateMarkers.execute(mapView);
        }
    }

    @Override
    public boolean onTap(GeoPoint point, MapView map) {
        if(itemClickedListener == null) {
            return false;
        }

        Projection projection = map.getProjection();
        int imageWidth = mBitmapMarker.getWidth();
        int imageHeight = mBitmapMarker.getHeight();

        // Find the point on the screen which has been clicked
        Point clickPoint = new Point();
        projection.toPixels(point, clickPoint);

        // Go backwards through the businesses and find out if the location falls within their marker
        for(int i = mOverlays.size() - 1; i >= 0; i--) {
            Business business = mOverlays.get(i);
            Point businessPoint = new Point();
            projection.toPixels(business.getPoint(), businessPoint);
            if(businessPoint.x > 0 && businessPoint.x < map.getWidth() &&
                    businessPoint.y > 0 && businessPoint.y < map.getHeight()) {
                // Point is visible, so may clicked
                int left = businessPoint.x - (imageWidth / 2);
                int right = businessPoint.x + (imageWidth / 2);
                int top = businessPoint.y - imageHeight;
                int bottom = businessPoint.y;

                if(clickPoint.x >= left && clickPoint.x <= right && clickPoint.y >= top && clickPoint.y <= bottom) { // Item has been clicked                   
                    // Adapter will be null as this isn't one. We will return the map 
                    // in the view for consistency but most importantly the index of the item
                    itemClickedListener.onItemClick(null, map, i, 0);
                    return true;
                }
            }

        }

        return false;
    }

    class DropMarkersTask extends AsyncTask<MapView, Void, Void> {
        MapView mapView;

        @Override
        protected Void doInBackground(MapView... mapViews) {
            mapView = mapViews[0];
            boolean mapUpdate = true;

            try {
                while(mapUpdate) {
                    Projection projection = mapView.getProjection();
                    Rect mapDrawRect = getMapDrawingRect(mapView, mBitmapMarker);
                    mapUpdate = false;

                    // Any visible markers with an offset higher than zero must be falling and therefore must be moved.
                    for(Business business : mOverlays) {
                        Point outPoint = new Point();
                        projection.toPixels(business.getPoint(), outPoint);
                        if (!mapDrawRect.contains(outPoint.x, outPoint.y)) {
                            continue;
                        }

                        if(business.getOffset() > 0) {
                            // A nice Quadratic fall curve.
                            double currentY = Math.sqrt(mapView.getHeight() - business.getOffset());
                            currentY = currentY + 0.5;
                            double dropDistance = Math.pow(currentY, 2);
                            double newOffset = mapView.getHeight() - dropDistance;
                            if(newOffset < 0) { // Marker can't have an offset less than zero
                                newOffset = 0;
                            }
                            business.setOffset(newOffset);
                            mapUpdate = true;
                        }
                    }

                    if(mapUpdate) {
                        this.publishProgress();
                        Thread.sleep(10);
                    }
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            return null;
        }

        @Override
        protected void onProgressUpdate(Void... unused) {
            mapView.postInvalidate();
        }
    }
}

Answer 3

I am posting the core concept that is working to have the drop pin animation in mapView as that of iPhopne. Same can be integrated with overlays also....

Drawable drawableImage = this.getResources().getDrawable(R.drawable.marker);
myCustomOverlay = new CustomOverlay(drawableImage, mapView);
initGeoPoint = new GeoPoint((int) (latitudeArray[i] * 1E6),(int) (longitudeArray[i] * 1E6));
OverlayItem overlayItem = new OverlayItem(initGeoPoint,getLocationAddress(latitudeArray[i], longitudeArray[i]),"xyz");

myCustomOverlay.addOverlay(overlayItem);
mapOverlays.add(myCustomOverlay);

RelativeLayout v = (RelativeLayout) View.inflate(getApplicationContext(),R.layout.marker_layout, null);
ImageView markerView = (ImageView) v.findViewById(R.id.marker_img_view);
AnimationSet animation = new AnimationSet(true);

TranslateAnimation translateAnimation = new TranslateAnimation(0.0f, 0.0f, -400.0f, 0.0f);
translateAnimation.setDuration(1000);
animation.addAnimation(translateAnimation);

markerView.startAnimation(animation);

mapView.addView(v, 
      new MapView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.FILL_PARENT), 
      new GeoPoint((int) (latitude * 1E6),(int) (longitude * 1E6)),
      MapView.LayoutParams.BOTTOM_CENTER));

mapView.invalidate();

marker_layout is as folows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/marker_img_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/marker" />

</RelativeLayout>

Overlay Class ###########

public class CustomOverlay extends BalloonItemizedOverlay<OverlayItem> {

    private ArrayList<OverlayItem> m_overlays = new ArrayList<OverlayItem>();
    private Context c;

    public CustomOverlay(Drawable defaultMarker, MapView mapView) {
        super(boundCenter(defaultMarker), mapView);
        c = mapView.getContext();
    }

    public void addOverlay(OverlayItem overlay) {
        m_overlays.add(overlay);
        populate();
    }

    @Override
    public void draw(Canvas canvas, MapView mapView, boolean shadow) {
        if (!shadow) {
            super.draw(canvas, mapView, false);
        }
    }

    public void removeOverlay(OverlayItem overlay) {
        m_overlays.remove(overlay);
        populate();
    }

    @Override
    protected OverlayItem createItem(int i) {
        return m_overlays.get(i);
    }

    @Override
    public int size() {
        return m_overlays.size();
    }

    @Override
    protected boolean onBalloonTap(int index, OverlayItem item) {
        Toast.makeText(
                c,
                "onBalloonTap for overlay index " + index + " Item"
                        + item.getTitle(), Toast.LENGTH_LONG).show();

        String id = "";

        return true;
    }
}