Animate markers on Google MapView

Question

I am working on an Android app that displays multiple markers on a Google MapView. Everything works perfectly but I would like the markers to have an animation when they appear on the map.

Here's an example of something similar on iPhone. See 1'20".

Here is how I add them to my MapView.

for(int i=0; i<myMarkerList.length(); i++){
GeoPoint x = new GeoPoint(
                (int)(lat*1E6),
                    (int)(lng*1E6));

        oItem = new OverlayItem(x, title, String.valueOf(nb_marker));
        pin.setAlpha(255);
        oItem.setMarker(pin);           

        if (oItem != null)              
            mapOverlay.addOverlay(oItem); // add the overlay item to the overlay            
        }              
        mapOverlays.add(mapOverlay); // add the overlay to the list of overlays
        mapView.invalidate(); // update the map shown

It is so pretty on iPhone, and someone must have already done something similar on Android but I can't seem to find any useful info.

EDIT: Okay so I recon I either have to override the draw method which will be long and not that pretty, or just give up with OverlayItems.

Thank you for your time.

Best regards,

Tom

Answer 1

You can use this tutorial for a reference, it uses animations, so I think that suits your solution.

Code from the tutorial :

//Reference to our MapView
MapView mapView = (MapView) activity.findViewById(R.id.mapview);

//Get a LayoutInflater and load up the view we want to display.
//The false in inflater.inflate prevents the bubble View being added to the MapView straight away
LayoutInflater inflater = activity.getLayoutInflater();
LinearLayout bubble = (LinearLayout) inflater.inflate(R.layout.bubble, mapView, false);

//Set up the bubble's close button
ImageButton bubbleClose = (ImageButton) bubble.findViewById(R.id.bubbleclose);
bubbleClose.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        Animation fadeOut = AnimationUtils.loadAnimation(ResultsMapResultsDisplayer.this.activity, R.anim.fadeout);
        bubble.startAnimation(fadeOut);
        bubble.setVisibility(View.GONE);
    }
});

---

private void displaySearchResultBubble(final SearchResult result) {
    //Hide the bubble if it's already showing for another result
    map.removeView(bubble);
    bubble.setVisibility(View.GONE);

    //Set some view content
    TextView venueName = (TextView) bubble.findViewById(R.id.venuename);
    venueName.setText(result.getName());

    //This is the important bit - set up a LayoutParams object for positioning of the bubble.
    //This will keep the bubble floating over the GeoPoint result.getPoint() as you move the MapView around,
    //but you can also keep the view in the same place on the map using a different LayoutParams constructor
    MapView.LayoutParams params = new MapView.LayoutParams(
        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,
        result.getPoint(), MapView.LayoutParams.BOTTOM_CENTER);

    bubble.setLayoutParams(params);

    map.addView(bubble);
    //Measure the bubble so it can be placed on the map
    map.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));

    //Runnable to fade the bubble in when we've finished animatingTo our OverlayItem (below)
    Runnable r = new Runnable() {
        public void run() {
            Animation fadeIn = AnimationUtils.loadAnimation(activity, R.anim.fadein);
            bubble.setVisibility(View.VISIBLE);
            bubble.startAnimation(fadeIn);
        }
    };

    //This projection and offset finds us a new GeoPoint slightly below the actual OverlayItem,
    //which means the bubble will end up being centered nicely when we tap on an Item.
    Projection projection = map.getProjection();
    Point p = new Point();

    projection.toPixels(result.getPoint(), p);
    p.offset(0, -(bubble.getMeasuredHeight() / 2));
    GeoPoint target = projection.fromPixels(p.x, p.y);

    //Move the MapView to our point, and then call the Runnable that fades in the bubble.
    mapController.animateTo(target, r);
 }

Answer 2

I seen your example app. From that i think you need only Glow in your markers, right? If yes then its possible through the styles and its having glow property also.

Answer 3

So I got it to work using a simple ArrayList of ImageViews and animation on them, no MapOverlay.