Android google map with moving camera across markers and ActionBarDrawerToggle

Problem statement:
In smart scheduler project, we were asked to show the location of different providers on map along with the list in the actionbar drawer.

Solution:
Here we have the requirement to show different markers on maps as well as to animate the camera on markers based on selection from drawer list.

i am assuming that you guys know how to setup maps on android, let's start from straight code. We will use the drawerlayout and actionbardrawertoggle to show the list and setup the google maps on our screen.

Code description: - demo based on different market location in Lahore Pakistan.
  In main activity, we are initializing the android widgets for fragment, actionbardrawertoggle with respective listener along with the google map setup. For setUpMaps, we are setting marker for "Liberty market" to show it's first selected position on screen.
On fragment list listener, we are implementing "loadMarketsDetails" to animate the camera location to respective location.

Fragment to display the list of drawer
package com.tenandroid.markets;

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

import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Toast;

import com.smart.scheduler.R;

public class LocationFragment extends ListFragment implements AdapterView.OnItemClickListener {

 private Activity activity;
 private List<String> fragment = new ArrayList<String>();
 private List<String> coords = new ArrayList<String>();
 public static ArrayList<String> details;

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  coords.add("31.511582 74.344433");
  coords.add("31.506898 74.284694");
  coords.add("31.522703 74.291561");
  coords.add("31.569517 74.306667");
  
  coords.add("31.523289 74.346493");
  coords.add("31.593500 74.316967");
  coords.add("31.600518 74.320400");
  coords.add("31.501100 74.322177");
  
  fragment.add("Liberty Market, Lahore");
  fragment.add("Karim Market Block, Lahore");
  fragment.add("Moon Market, Lahore");
  fragment.add("Anarkali Market, Lahore");
  
  fragment.add("Main Market, Lahore");
  fragment.add("Shalimar Market, Lahore");
  fragment.add("Azam Cloth Market, Lahore");
  fragment.add("Barkat Market Lahore");
  
  return inflater.inflate(R.layout.fragment_line, container, false);

 }

 @Override
 public void onAttach(Activity activity) {
  super.onAttach(activity);
  this.activity = activity;
  Log.i("MAPS", "onAttach executed successfully");

 }

 @Override
 public void onActivityCreated(Bundle savedInstanceState) {
  super.onActivityCreated(savedInstanceState);

  ArrayAdapter<String> adapter = new ArrayAdapter<String>(activity, R.layout.simple_row_item, fragment);
  setListAdapter(adapter);
  getListView().setOnItemClickListener(this);

 }

 @Override
 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  Toast.makeText(activity, "Clicked " + position, Toast.LENGTH_LONG).show();
  details = new ArrayList<String>();
  details.add(fragment.get(position));
  details.add(coords.get(position));

  try {
   ((OnMarketsSelectedListener) activity).loadMarketsDetails(details);
  } catch (ClassCastException cce) {

  }
 }

 public interface OnMarketsSelectedListener {
  public void loadMarketsDetails(ArrayList<String> details);
 }
}


Main activity screen with 
package com.tenandroid.markets;

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

import android.app.FragmentManager;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.widget.DrawerLayout;
import android.view.MenuItem;
import android.view.View;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.smart.scheduler.R;

public class MainActivity extends FragmentActivity implements LocationFragment.OnMarketsSelectedListener {

 DrawerLayout drawerLayout;
 View drawerView;
 private ActionBarDrawerToggle mDrawerToggle;

 private GoogleMap mMap;
 public static String province;
 public static String coords;
 public static List<Double> final_coords;
 public static MarkerOptions marker;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  drawerView = (View) findViewById(R.id.drawer);

  mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_drawer, R.string.app_name, R.string.app_name) {

   /** Called when drawer is closed */
   public void onDrawerClosed(View view) {
   }

   /** Called when a drawer is opened */
   public void onDrawerOpened(View drawerView) {
   }
  };
  drawerLayout.setDrawerListener(mDrawerToggle);
  getActionBar().setDisplayHomeAsUpEnabled(true);
  getActionBar().setDisplayShowHomeEnabled(true);
  FragmentManager fm2 = getFragmentManager();
  if (fm2.findFragmentById(R.id.content_frame) == null) {
   LocationFragment list = new LocationFragment();
   fm2.beginTransaction().add(R.id.content_frame, list).commit();
  }
 }

 @Override
 protected void onPostCreate(Bundle savedInstanceState) {
  super.onPostCreate(savedInstanceState);
  mDrawerToggle.syncState();

 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  if (mDrawerToggle.onOptionsItemSelected(item)) {
   return true;
  }
  return super.onOptionsItemSelected(item);
 }

 @Override
 protected void onResume() {
  super.onResume();

  setUpMapIfNeeded();
 }

 private void setUpMapIfNeeded() {
  if (mMap == null) {
   mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
   if (mMap != null) {
    setUpMap();
   }
  }
 }

 private void setUpMap() {
  mMap.setBuildingsEnabled(true);
  float mCameraZoom = 15.00f;
  mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
  mMap.animateCamera(CameraUpdateFactory.newCameraPosition(CameraPosition.fromLatLngZoom(new LatLng(31.511582, 74.344433), mCameraZoom)));
  mMap.addMarker(new MarkerOptions().position(new LatLng(31.511582, 74.344433)).title("Liberty Market, Lahore")).showInfoWindow();
 }

 @Override
 public void loadMarketsDetails(ArrayList<String> details) {
  marker = new MarkerOptions().position(new LatLng(31.511582, 74.344433)).title("Liberty Market, Lahore");

  province = details.get(0);
  coords = details.get(1);
  final_coords = splitPayload(coords);
  mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
  mMap.setBuildingsEnabled(true);
  float mCameraZoom = 15.00f;
  mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
  if (marker != null) {

   marker.position(new LatLng(final_coords.get(0), final_coords.get(1))).title(province);
   mMap.addMarker(marker).showInfoWindow();
  } else {
   marker = new MarkerOptions().position(new LatLng(final_coords.get(0), final_coords.get(1))).title(province);
   mMap.addMarker(marker).showInfoWindow();
  }

  mMap.animateCamera(CameraUpdateFactory.newCameraPosition(CameraPosition.fromLatLngZoom(new LatLng(final_coords.get(0), final_coords.get(1)), mCameraZoom)));

 }

 public List<Double> splitPayload(String payload) {
  String[] lngLat = payload.split(" ");
  List<Double> f_cords = new ArrayList<Double>();
  try {
   f_cords.add(Double.parseDouble(lngLat[0]));
   f_cords.add(Double.parseDouble(lngLat[1]));

  } catch (Exception e) {
   e.getMessage();
  }
  return f_cords;

 }

}

Layout file activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/background_light"
        android:orientation="vertical"
        android:padding="5dp" >

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="200dp"
            android:layout_height="match_parent" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>


Android google map with moving camera across markers and ActionBarDrawerToggle Android google map with moving camera across markers and ActionBarDrawerToggle Reviewed by Unknown on Friday, November 21, 2014 Rating: 5

No comments:

attiqrao. Powered by Blogger.