Skip to main content

UI Components

Join the Mapbox Developers Discord Communityarrow-right

Drop-In UI makes use of standalone UI components exposed by the Navigation SDK to render data on the screen. The UI components spread across various navigation states include:

  • Map: Uses the Mapbox Maps SDK for Android to display a map and enhance the navigation experience. Read more in the Maps guide.
  • Speed limit: Renders posted speed limit data. Read more in the Speed Limit guide.
  • Maneuver instructions: Renders textual maneuver instructions. Read more in the Maneuver guide.
  • Route line: Renders route line connecting origin and destination. Read more in the Route Line guide.
  • Route arrow: Renders route arrow to illustrate the next maneuver. Read more in the Route Arrow guide.
  • Trip progress information: Renders trip progress information on to the info panel. Read more in the Trip Progress guide.
  • Recenter button: When pressed the camera centers on your current location.
  • Audio Guidance button: Provides functionality to mute/unmute audio guidance instructions.
  • Camera control button: Provides functionality to toggle between following and overview target camera modes.
  • Start navigation button: Press the button to start active navigation.
  • Route preview button: Press the button to transition to route preview state.
  • End navigation button: Press the button to exit active navigation and return to free drive state.
  • POI details: Renders POI name and address of the destination if available, otherwise a placeholder text Dropped Pin is used.
  • Info Panel: An Android framework bottom sheet that hosts different pieces of information depending on the current navigation state. The Info Panel is divided into header and content views. Header is where Drop-In UI displays data like POI details, arrival text, trip progress details, and buttons to transition between all the screen states. Drop-In UI does not render any data in the content view, so by default, this section is empty. But, the content view is an empty frame layout, so you can inject any custom view rendering data from a different data source.
Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?