Customizing the Hello World App part 3

Adding a Google Map Template to the project

This tutorial build on the 3 previous tutorials

Your very first app with Android Studio – starting from scratch

Customizing the Hello World App part 1

Customizing the Hello World App part 2

 

To continue from here, you could either have followed the above tutorials or

download the .zip file from here:

This is part 3 of the customization.

In this part, we will add a new Layout and Activity to the project by using the Google Map Template.

The Map will show a certain location we will define and we will also add a custom icon to the Map that points to our location.

Similar to this will the Map look like (with your own destination, icon and description if you want):

Android_by_Example-CSP_Proof-09-12-14-113_4

Let’s start by adding the Google App Template to the project

Right-click on your app folder and choose:

New -> Google -> Google Maps Activity

Screenshot from 2015-05-08 08:12:29

After that, you should have 3 new files in your project:

  • MapsActivity.java
  • activity_maps.xml
  • google_maps_api.xml

The google_maps_api.xml should be open in your Editor, if not open it. Let’s take a look:

Screenshot from 2015-05-08 08:18:29

In this file, Google explains to you that you need an API Key to be able to use the map in your project.

After you got your key, you need to come back to this file and replace the

YOUR_KEY_HERE text with the key you got.

So, go ahead and follow the Link you got in your google_maps_api.xml and press <continue>.

Screenshot from 2015-05-08 10:27:19
It will take a moment for Google to produce the first key and will present you the next screen:

Screenshot from 2015-05-08 10:30:48

 

The only thing you have to do is, to press <create> which will finally give you the API key for the map.

It should look like this:

Screenshot from 2015-05-08 10:34:51

Now, copy the line that says API key into the google_maps_api.xml like this:

Screenshot from 2015-05-08 10:37:49

Entering the coordinates for the desired location

Open the MapsActivity and edit or replace:

private void setUpMap() {
    mMap.addMarker(new 
MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
}

with the LatLong coordinates you want to use like this:

private void setUpMap() {
mMap.addMarker(new
MarkerOptions().position(new LatLng(57.616029, 11.763617)).title("Marker"));
}

How do I find the LatLong coordinates of a particular location?

You can search for the address in Google Maps, then right-click on the location in the map and
select “What’s here?”. A small window containing the coordinates is then displayed.

Android_by_Example-CSP_Proof-09-12-14-114_2

The before mentioned code sets a red, balloon-shaped marker as shown below:

Android_by_Example-CSP_Proof-09-12-14-114_4

You can leave it this way or put your own icon in here.

If you want to use a customised icon as a marker, you will need a suitable image. I have found a page on the Internet that provides thousands of icons for Google Maps:
http://mapicons.nicolasmollet.com/marker s/tourism/cult-religion/cemetary/?
custom_color=402c15

From the above page, I have downloaded the following icon, named it cemetary.png and copied it in the
drawable folder of the project.

Android_by_Example-CSP_Proof-09-12-14-114_6

We will now add the Java code to our MapsActivity to use this custom icon.

  • add to imports
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
  • and edit the Code in your MapsActiity
private void setUpMap() {
mMap.addMarker(new
MarkerOptions()
.position(new LatLng(57.616029, 11.763617))
 .icon(BitmapDescriptorFactory.fromResource(R.drawable.cemetary))
.title("Marker"));
}

We want to be able to reach the Map from the start screen of the app. The easiest way to solve this is, to add an item for the Map to the ActionBar.

Adding the MapActivity to the ActionBar

The Name for the Map Screen can be defined in strings.xml like this:

<string name="action_map">Map</string>

The menu entry for the ActionBar needs to be in menu_main.xml.

Here, I replaced the entry for setting with the map entry:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 tools:context="com.example.janebabra.myapplication.About">
 <item android:id="@+id/action_map"
 android:title="@string/action_map"
 android:orderInCategory="100"
 app:showAsAction="ifRoom" />
<item android:id="@+id/action_about" android:title="@string/action_about"
 android:orderInCategory="100" app:showAsAction="ifRoom" />
 </menu>

Now we can use this information in our MainActivity and replacing the entry for settings with an entry for the map:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_about:
            Intent intent = new Intent(this, About.class);
            startActivity(intent);
            return true;
        case R.id.action_map:
            Intent intent2 = new Intent(this, MapsActivity.class);
            startActivity(intent2);
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

The App is ready for its first test run.

This is what the map look like right now:

device-2015-05-08-114004

It has a really bad zoom factor. You can do the zooming with your fingers of course.

But if you wish, you can further improve the look of the map by specifying a zoom factor and
changing the viewing angle of the camera using the Tilt option.

 

The final version of the project has some improvements to zoom factor, viewing angle camera tilt.

Take a look at the GitHub repository to get some inspiration what you can do with your map project.

https://github.com/greendogs/MyApplication

More information can also be found at Google website. Here some Links to start with:

Hope you enjoyed the tutorial.

See you next time.

Don’t forget to subscribe.

 

 

 

Tags: