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
Layout file activity_main.xml
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
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788package 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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139package 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
1234567891011121314151617181920212223242526272829<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
Reviewed by Unknown
on
Friday, November 21, 2014
Rating:

No comments: