Android Google Map Styles Like Uber

Filed Under: Android

Have you ever noticed how Uber and other few popular location-based applications have a different style of Google Maps? Some times it looks even better than the default Google Map Style. Today we’ll see how to implement Google map styles in our Android Application.

Overview

We have discussed and implemented Google Maps in quite a few tutorials until now. Here’s a list of them:

Android Studio provides a default template for Google Maps. Let’s use that.

As covered in the previous tutorials, you need to add the API key to use Google Maps from the Google Cloud Console.

To set Map styles we simply do the following on the instance of Google Map.


mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(
                            this, "jsonPathGoesHere");

Project Structure

Android Google Maps Style Project

Android Google Maps Style Project


The map styles are present in the raw folder JSON files. You can customize them or explore the various map styles from the web.

Code

The code for the activity_maps.xml is given below:


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MapsActivity" />

    <Button
        android:id="@+id/btnChangeStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:text="CHANGE MAP STYLE"/>
    
</FrameLayout>

SupportMapFragment is used to showcase the map in the layout of our activity.

The code for the MapsActivity.java class is given below:


package com.journaldev.androidgooglemapsstyling;

import android.content.res.Resources;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;
import com.google.android.gms.maps.model.MarkerOptions;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    private Button button;


    int[] rawArray = {R.raw.assasin_creed, R.raw.uber_style, R.raw.game_style, R.raw.vintage_style};

    int currentIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        button = findViewById(R.id.btnChangeStyle);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                setMapStyle();
            }
        });


        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }


    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney and move the camera
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));

        setMapStyle();


    }

    private void setMapStyle() {


        if (currentIndex == rawArray.length && rawArray.length != 0) {
            currentIndex = 0;
        }

        try {
            mMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, rawArray[currentIndex++]));

        } catch (Resources.NotFoundException e) {
            Log.e("MapsActivity", "Cannot find style.", e);
        }
    }

}

Once the map is ready, the onMapReady gets triggered. Inside this, we set a dummy location marker. The setMapStyle is used to toggle through the various map styles stored in the array.

Let’s look at the output of the above application in action:

Android Google Maps Styled Output

Android Google Maps Styled Output


That brings an end to this quick tutorial on styling Google Maps in Android.

You can download the full source code from below or browse through it from our Github Repository.

Comments

  1. Josi says:

    I like your tutorial, but when your followers trying to learn from your posts using mobile devices, a lot of Ads covered the menu section of your website, and cannot open any sub menu. It looks like the ads on the right side of your page is covering menu section when using mobile devices. At least you need to fix that b.c now a days a lot of people are using mobile devices to learn things from any website. Thanks

    1. Pankaj says:

      Thanks for the feedback, I will see how to fix it on mobile devices.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages