MobileAndroidBuilding a Mapping Android App

Building a Mapping Android App

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

In an earlier article, we learned about the setup needed for building a mobile Android application that uses Google Maps. In this article, we will create an Android application that uses Google Maps.

Hands On

In our earlier article, we had finished configuring our default project to work with Google Maps. We will continue from there.

Open activity_main.xml in Text View. You will see the default text, as shown:

<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"
   android_paddingLeft="@dimen/activity_horizontal_margin"
   android_paddingRight="@dimen/activity_horizontal_margin"
   android_paddingTop="@dimen/activity_vertical_margin"
   android_paddingBottom="@dimen/activity_vertical_margin"
      tools_context=".MainActivity">

   <TextView android_text="@string/hello_world"
   android_layout_width="wrap_content"
   android_layout_height="wrap_content" />

</RelativeLayout>

We will invoke Google Maps in two different ways: one via MapFragment and other via MapView. In this article, we will use MapFragment for our mapping needs.

We will add a new Blank activity to the project, called FragmentMapActivity.

MapAnd
Figure 1: The new Blank activity

We will now change the activity content to contain a map fragment.

Open the layout file and change the contents, as shown in the following code snippet.

<fragment xmlns_android="http://schemas.android.com/
   apk/res/android"
xmlns_map="http://schemas.android.com/apk/res-auto"
android_id="@+id/map"
android_layout_width="match_parent"
android_layout_height="match_parent"
android_name="com.google.android.gms.maps.
   MapFragment"/>

Next, we will edit the class file FragmentMapActivity.java. We will include a new imports because we will be using them in the class.

package com.example.vipulp.myapplication;

import android.support.v4.app.FragmentActivity;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.app.Activity;

import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;

import com.google.android.gms.maps.model.LatLng;

We will update the signature of the class definition. We will make two changes:

  1. We will extend the class from Activity.
  2. We will implement OnMapReadyCallback because we want to initialize the map to center on Google headquarters in Mountain View, California.
// Class definition

public class FragmentMapActivity extends Activity
      implements OnMapReadyCallback {
   GoogleMap mMap;

We now will make changes in the default code generated. Here, we create a map fragment and

@Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_fragment_map);
      MapFragment mapFragment = (MapFragment)
         getFragmentManager().findFragmentById(R.id.map);
      mapFragment.getMapAsync(this);

   }

For the last change, we will implement the onMapReady callback where we will set the local GoogleMaps object and center it on Mountain View.

@Override
   public void onMapReady(final GoogleMap map) {
      this.mMap = map;
      // latitude and longitude of Google Headquarters
      // in Mountain View, California, USA
      LatLng coordinate = new LatLng(37.423340, -122.087891);
      CameraUpdate yourLocation =
         CameraUpdateFactory.newLatLngZoom(coordinate, 15);
      mMap.animateCamera(yourLocation);
   }

Our FragmentMapActivity class is now ready. We will add a button in the MainActviity class and implement a click handler on the button to invoke FragmentMapActivity.

Add a Button element on layout file activity_main.xml.

<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"
   android_paddingLeft="@dimen/activity_horizontal_margin"
   android_paddingRight="@dimen/activity_horizontal_margin"
   android_paddingTop="@dimen/activity_vertical_margin"
   android_paddingBottom="@dimen/activity_vertical_margin"
      tools_context=".MainActivity">

   <TextView android_text="@string/hello_world"
   android_layout_width="wrap_content"
   android_layout_height="wrap_content"
   android_id="@+id/textView" />

   <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Fragment Map"
   android:id="@+id/buttonFragmentMap"
   android:layout_below="@+id/textView"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="79dp"
   android:onClick="openFragmentMap"/>

</RelativeLayout>

In the MainActivity.java file, we will add a couple of import statements that we will use later.

import android.content.Intent;
import android.view.View;

Lastly, we will implement the click handler for the button.

   public void openFragmentMap(View view) {
      Intent intent = new Intent(this,
         FragmentMapActivity.class);
      startActivity(intent);
   }

Our mapping application is now ready. We can run this in the Android emulator or the phone and you will be able to see that the map is shown when we click the button on the home screen of the application.

Summary

In this article, we learned how we can use MapFragment to build a map and center it to a specific location. I hope you have found this information useful.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories