Friday, February 1, 2013

Animation on Google Maps Android API v2

This example demonstrate how to achieve animation on Google Maps Android API v2. Also handle animation event by implement CancelableCallback and override onCancel() and onFinish().

Animation on Google Maps Android API v2


package com.example.androidmapsv2;

import java.util.ArrayList;
import java.util.List;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CancelableCallback;
import com.google.android.gms.maps.GoogleMap.OnMapClickListener;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.Polyline;
import com.google.android.gms.maps.model.PolylineOptions;

import android.os.Bundle;
import android.app.Activity;
import android.app.FragmentManager;
import android.graphics.Color;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity 
 implements OnMapClickListener{

 private GoogleMap myMap;
 PolylineOptions polylineOptions;
 Polyline polyline;
 List<LatLng> listPoint;
 int currentPt;
 
 TextView info;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        FragmentManager myFragmentManager = getFragmentManager();
        MapFragment myMapFragment = 
          (MapFragment)myFragmentManager.findFragmentById(R.id.map);
        myMap = myMapFragment.getMap();
        
        myMap.setOnMapClickListener(this);
        
        listPoint = new ArrayList<LatLng>();
        clearPolyline();
        
        Button btnClear = (Button)findViewById(R.id.clear);
        Button btnAnimate = (Button)findViewById(R.id.animate);
        Button btnStop = (Button)findViewById(R.id.stopanimate);
        info = (TextView)findViewById(R.id.info);
        
        btnClear.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    clearPolyline();
   }});

        btnAnimate.setOnClickListener(btnAnimateOnClickListener);
        
        btnStop.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    myMap.stopAnimation();
   }});
        
    }
    
    OnClickListener btnAnimateOnClickListener =
      new OnClickListener(){

    @Override
    public void onClick(View v) {
     if(listPoint==null || listPoint.isEmpty()){
      Toast.makeText(getApplicationContext(), 
        "Not enought point!", 
        Toast.LENGTH_LONG).show();
     }else{
      myMap.animateCamera(
        CameraUpdateFactory.newLatLng(listPoint.get(0)), 
        MyCancelableCallback);
      currentPt = 0;
      
      info.setText("Start Animation to: " + listPoint.get(0));

     }
    }
     
    };
    
    private void clearPolyline(){
     if(polyline != null){
      polyline.remove();
     }
     
     polylineOptions = new PolylineOptions();
     polylineOptions.color(Color.RED);
     
     listPoint.clear();
     
     myMap.clear();
    }


 @Override
 public void onMapClick(LatLng point) {
  myMap.addMarker(new MarkerOptions().position(point).title(point.toString()));

  polylineOptions.add(point);
  if(polyline != null){
   polyline.remove();
  }
  
  polyline = myMap.addPolyline(polylineOptions);
  listPoint.add(point);
 }
 
 CancelableCallback MyCancelableCallback =
   new CancelableCallback(){

    @Override
    public void onCancel() {
     info.setText("onCancel()");
    }

    @Override
    public void onFinish() {
     if(++currentPt < listPoint.size()){
      myMap.animateCamera(
        CameraUpdateFactory.newLatLng(listPoint.get(currentPt)), 
        MyCancelableCallback);
      info.setText("Animate to: " + listPoint.get(currentPt));
     }else{
      info.setText("onFinish()");
     }
     
    }
  
 };

}


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment"/>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <Button
            android:id="@+id/clear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Clear" />
        <Button
            android:id="@+id/animate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Start Animation" />
        <Button
            android:id="@+id/stopanimate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Stop Animation" />
        <TextView 
            android:id="@+id/info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</RelativeLayout>



download filesDownload the files.

Next:
- GoogleMap animation with zoom


The series:
A simple example using Google Maps Android API v2, step by step.

2 comments:

Anonymous said...

You sir deserve a cookie!!!Thank you it's just what I needed for my assignment at uni!!!

Muhammad Salma Nabila Alibasyir said...

Nice tutorial !
I have made marker and polyline but it can show half of polyline in android map.
How to set camera to show whole of my polyline automatically?