Using the Navigation SDK for Android, you can modify the user experience with your map by determining which of the built-in UI controls and elements appear on the map. You can also adjust the visual appearance of the navigation UI. Refer to the Policies page for guidelines on acceptable modifications to the navigation UI.
This document describes how to modify your map's user interface in two ways:
Map UI controls
Map UI controls sit on top of the navigation view. The
Navigation SDK for Android automatically repositions your custom controls
when the built-in layout changes. For each position of the layout, you may 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
For example, the images below show examples of various positions of a UI control that inform a rideshare driver of the rider's location during a pickup.
Add a custom secondary header
By default, screen layouts in navigation mode provide a position for a secondary header located beneath the primary header. This secondary header appears when necessary, such as with lane guidance. Your app can use this secondary header position of the layout for custom content. When you use this feature, your control covers any default secondary header content. If your navigation view has a background, that background remains in place, covered by the secondary header. When your app removes the custom control, any default secondary header can appear in its place.
The custom secondary header position aligns its top edge with the bottom edge of
the primary header. This position is only supported in portrait mode
. In
landscape mode
, the secondary header is unavailable, and the layout does not
change.
- Create an Android View with the custom UI element or ViewGroup.
- Inflate the XML or instantiate the custom view to get an instance of the view to add as a secondary header.
Use
NavigationView.setCustomControl
orSupportNavigationFragment.setCustomControl
with CustomControlPosition as SECONDARY_HEADER.The example below creates a fragment and adds a custom control in the secondary header position.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER); ```
Remove a secondary header
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 to the bottom of the navigation view
Your app can specify a custom control aligned to the bottom edge of the navigation view. When your app adds the custom control, the re-center button and the Google logo move up to accommodate it.
- Create an Android View with the UI element or view group that you want to add.
- Create the navigation view or fragment.
- 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
SupportNavigationFragment
:
private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
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
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);
Map UI accessories
The Navigation SDK for Android provides UI accessories that appear during navigation similar to those found in the Google Maps for Android application. You can adjust the visibility or visual appearance of these controls as described in this section. Changes you make here reflect during the next navigation session.
Refer to the Policies page for guidelines on acceptable modifications to the navigation UI.
View the code
Modify 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 Type | Attributes |
---|---|
Background color |
|
Text elements for instructions |
|
Text elements for next steps |
|
Maneuver icons |
|
Lane guidance |
|
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 off the traffic layer
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. However, 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));
Enable traffic lights and stop signs
You can enable traffic lights and stop signs in the map UI. With this feature, the user can enable the display of traffic lights or stop sign icons along their route, providing better context for more efficient and accurate trips.
By default, traffic lights and stop signs are disabled in the
Navigation SDK. To enable this feature, call
DisplayOptions
for each feature independently.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Add custom markers
Navigation SDK for Android now uses Google Maps APIs for markers. Go to the Maps API documentation for more information.
Floating text
You can add floating text anywhere in your app, provided it does not cover the Google attribution. The Navigation SDK doesn't support anchoring the text to a latitude/longitude on the map, or to a label. Go to Info windows for more information.
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.
void 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 NavigationView
. 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 Value | Description |
---|---|
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 is a vertical bar that appears on the trailing right edge of the map when navigation starts. When enabled, it displays an overview for an entire trip, along with the user's destination and current position.
The provides users the ability to quickly anticipate any upcoming issues, such as traffic, without needing to zoom in. They can then reroute the trip if necessary. If the user 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:
Route elapsed—the elapsed portion of the trip.
Current position—the user's current location in the trip.
Traffic status—the status of upcoming traffic.
Final destination—the final trip destination.
Enable the trip progress bar by calling the setTripProgressBarEnabled()
method
on
NavigationView
or
SupportNavigationFragment.
For example:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);