Sunday, February 3, 2013

GoogleMap animation with zoom

It's modified from the exercise "Animation on Google Maps Android API v2". Also enable various ui control, such as ZoomControls, Compass and All Gestures.



Re-allocate layout to include a seekbar to set the expected zoom level.
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:id="@+id/clear"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="Clear" />
            <Button
                android:id="@+id/animate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Start" />
            <Button
                android:id="@+id/stopanimate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Stop" />
        </LinearLayout >
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Zoom" />
            <SeekBar
                android:id="@+id/zoombgar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="19"
                android:progress="0"
                android:text="Start" />
            <Button
                android:id="@+id/stopanimate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Stop" />
        </LinearLayout >
        <TextView 
            android:id="@+id/info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment"/>

</LinearLayout>


Modify the code to animate to the expected zoom level by calling animateCamera() method with CameraUpdateFactory.zoomTo(zoomValue), and animation duration also.
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.SeekBar;
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;
 SeekBar zoomBar;
 
    @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();
        
        zoomBar = (SeekBar)findViewById(R.id.zoombgar);
        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();
   }});
        
        myMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
        myMap.getUiSettings().setZoomControlsEnabled(true);
        myMap.getUiSettings().setCompassEnabled(true);
        myMap.getUiSettings().setAllGesturesEnabled(true);
    }
    
    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{

      float zoomValue = (float)(zoomBar.getProgress() + 2);
      
      myMap.animateCamera(
        CameraUpdateFactory.zoomTo(zoomValue), 
        5000,
        MyCancelableCallback);      
      
      currentPt = 0-1;
      
      info.setText("Zoom to: " + String.valueOf(zoomValue));

     }
    }
     
    };
    
    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)), 
        5000,
        MyCancelableCallback);
      info.setText("Animate to: " + listPoint.get(currentPt));
     }else{
      info.setText("onFinish()");
     }
     
    }
  
 };

}


Next:
- Google Maps V2 Animation with bearing

download filesDownload the files.

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

No comments: