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.

No comments:

Post a Comment