Customize the Navigation User Interface

You can customize elements of the navigation user interface and the map, and add custom markers to the map. Refer to the Policies page for guidelines on acceptable modifications to the Navigation UI.

See the code

Customize the navigation header

Use NavigationFragment.setStylingOptions() or NavigationView.setStylingOptions() to change the theme of the navigation header and the next-turn indicator that appears below the header when available.

You can set the following attributes:

Attribute TypeAttributes
Background color
  • Primary day mode - the daytime color of the navigation header
  • Secondary day mode - the daytime color of the next-turn indicator
  • Primary night mode - the nighttime color of the navigation header
  • Secondary night mode - the nighttime color of the next-turn indicator
Text elements for instructions
  • Text color
  • Font
  • Text size of the first row
  • Text size of the second row
Text elements for next steps
  • Font
  • Text color of the distance value
  • Text size of the distance value
  • Text color of the distance units
  • Text size of the distance units
Maneuver icons
  • Color of the large maneuver icon
  • Color of the small maneuver icon
Lane guidance
  • Color of the recommended lane or lanes

The following example shows how to set styling options:

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getFragmentManager()
        .findFragmentById(R.id.navigation_fragment);
// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
        .primaryDayModeThemeColor(0xff1A237E)
        .secondaryDayModeThemeColor(0xff3F51B5)
        .primaryNightModeThemeColor(0xff212121)
        .secondaryNightModeThemeColor(0xff424242)
        .headerLargeManeuverIconColor(0xffffff00)
        .headerSmallManeuverIconColor(0xffffa500)
        .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
        .headerNextStepTextColor(0xff00ff00)
        .headerNextStepTextSize(20f)
        .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
        .headerDistanceValueTextColor(0xff00ff00)
        .headerDistanceUnitsTextColor(0xff0000ff)
        .headerDistanceValueTextSize(20f)
        .headerDistanceUnitsTextSize(18f)
        .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
        .headerInstructionsTextColor(0xffffff00)
        .headerInstructionsFirstRowTextSize(24f)
        .headerInstructionsSecondRowTextSize(20f)
        .headerGuidanceRecommendedLaneColor(0xffffa500));

Turn the traffic layer off

Use NavigationMap.setTrafficEnabled() to enable or disable the traffic layer on the map. This setting affects the indications of traffic density shown on the map as a whole, but it does not affect the traffic indications on the route plotted by the navigator.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

Add custom markers

You can add custom markers to the map, to indicate points of interest for your application or users. For example, you may want to indicate the pickup point at the end of the route. Use NavigationMap.addMarker() to add a marker, and NavigationMap.setOnMarkerClickListener() to listen for taps on a marker.

The code below uses an icon stored in the project's drawable resources, R.drawable.ic_person_pin_48dp. You can use any image that suits your app.

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

You can specify a custom image as the marker; but, the SDK doesn’t currently support labeling these images with text. For more information, see Customizing Markers.

Floating text

You can add floating text anywhere in your app, as long as the Google attribution isn’t covered. The Navigation SDK doesn’t support anchoring the text to a latitude/longitude on the map, or to a label. For more information, see Info windows.

Display the speed limit

You can programmatically show or hide the speed limit icon. Use NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled(), or SupportNavigationFragment.setSpeedLimitIconEnabled() to display or hide the speed limit icon. When enabled, the speed limit icon displays in a bottom corner during guidance. The icon displays the speed limit of the road that the vehicle is traveling on. The icon only appears in locations where reliable speed limit data is available.

// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);

The speed limit icon is temporarily hidden when the recenter button is displayed.

Set night mode

You can programmatically control the behavior of night mode. Use NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode(), or SupportNavigationFragment.setForceNightMode() to turn night mode on or off, or let the Navigation SDK control it.

  • AUTO Lets the Navigation SDK determine the appropriate mode according to the device location and local time.
  • FORCE_NIGHT forces night mode on.
  • FORCE_DAY forces day mode on.

The following example shows forcing night mode to turn on within a navigation fragment:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Display directions list

First, create the view and add it to your hierarchy.

setupDirectionsListView(){
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

Be sure to forward life cycle events to the DirectionsListView just like they are with NaviagtionView. For example:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Hiding alternate routes

When the user interface becomes cluttered with too much information, you can reduce clutter by displaying fewer alternate routes than the default (two), or by displaying no alternate routes at all. You can configure this option before you fetch the routes by calling the RoutingOptions.alternateRoutesStrategy() method with one of the following enumeration values:

Enumeration ValueDescription
AlternateRoutesStrategy.SHOW_ALL Default. Displays up to two alternate routes.
AlternateRoutesStrategy.SHOW_ONE Displays one alternate route (if one is available).
AlternateRoutesStrategy.SHOW_NONE Hides alternate routes.

Example

The following code example demonstrates how to hide alternate routes altogether.

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);