Navigation SDK is currently available only to select customers. Contact sales to learn more.

Customize the navigation UI

Stay organized with collections Save and categorize content based on your preferences.

This document describes how customize your map's UI in two fundamental ways:

Add custom controls

Custom controls sit on top of the navigation view. The Navigation SDK for Android automatically repositions your custom controls as the built-in layout changes. For each position, you can set one custom control. The custom control can be one UI element or, if your design requires more, you can use a ViewGroup with multiple UI elements.

The setCustomControl method provides positions as defined in the CustomControlPosition enum:

  • SECONDARY_HEADER (appears in portrait mode only)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

In the image below, you can see examples of each position in the placement of a UI control informing the driver of the location of a rider.

Custom Control Positions

Add a custom control below the primary header

By default, layouts display a Then arrow or lane guidance below the primary header. Your app can replace the default layout with a custom control set in the secondary header position. This control replaces the default content on top of the navigation view. If your view has a background, that background remains in place. When your app removes the custom content, the default content appears in its place.

This position is below the primary map header, with the top edge aligned with bottom edge of the primary header. The default secondary header is hidden. This position is only supported in portrait mode. In landscape mode, the secondary header is unavailable, and the layout does not change.

  1. Create an Android View with the custom UI element or ViewGroup.
  2. Inflate the xml or instantiate the custom view to get an instance of the view to add as a secondary header.
  3. Use NavigationView.setCustomControl or NavigationFragment.setCustomControl with CustomControlPosition as SECONDARY_HEADER.

    The example below creates a fragment and adds custom control in the secondary header position.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
          CustomControlPosition.SECONDARY_HEADER);
    

Remove a secondary header

When you want to remove the secondary header and return to the default content, use the setCustomControl method.

  • Set the view to null to remove the view.

    mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
    

Add a custom control on top of the navigation view

Your app can specify a custom control aligned with the bottom edge of the view. When your app adds the custom control, the re-center button and the Google logo move up to accommodate the custom control.

  1. Create an Android View with the UI element or view group you want to add.
  2. Create the navigation view or fragment.
  3. Call the setCustomControl method on the navigation view or fragment, and specify the control and the position to use.

The following example shows a custom View added to a NavigationFragment:

  private NavigationFragment mNavFragment;
    mNavFragment = (NavigationFragment)
      getFragmentManager().findFragmentById(R.id.navigation_fragment);

    // Create the custom control view.
    MyCustomView myCustomView = new MyCustomView();

    // Add the custom control to the bottom end corner of the layout.
    mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
       BOTTOM_END_BELOW);

Remove a custom control

When you want to remove the custom control, use the setCustomControl method and specify the position of the control you want to remove.

  • Set the view to null for that position.

    mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);
    

Create customized styles and markers

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 SupportNavigationFragment.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 SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) 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 GoogleMap.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 GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

Add custom markers

NavSDK now uses GoogleMap apis for markers! Please see the Maps API documentation for more information.

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 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 NavigationView.setForceNightMode() or SupportNavigationFragment.setForceNightMode() to turn night mode on or off, or let the Navigation SDK for Android 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.

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);

Trip progress bar

The trip progress bar added to navigation.

The trip progress bar displays the details for a trip as a vertical bar on the trailing edge of the map.

The bar displays an overview of the entire trip without the driver needing to zoom out. Enable the bar so drivers can anticipate any upcoming issues, such as traffic, and reroute the trip if necessary.

If enabled, the progress bar appears on the trailing edge of the map when navigation starts. If the driver reroutes the trip, the progress bar resets as if a new trip has started from that point.

The trip progress bar displays the following status indicators:

  • Traffic status — the status of upcoming traffic.

  • Route elapsed — the elapsed portion of the trip.

Enable the trip progress bar by calling the setTripProgressBarEnabled() method on NavigationView or SupportNavigationFragment. For example:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);