Skip to main content

Status

Join the Mapbox Developers Discord Communityarrow-right

There are many situations where you might want to show a quick status message to the user, without necessarily waiting for the user to respond. For example, when the Navigation is recalculating a new route or a voice instruction has been muted in response to user action, your application should show a quick message.

The Mapbox Navigation SDK provides a MapboxStatusView for these use cases. A MapboxStatusView provides a quick pop-up message to the user and can be configured to either disappear after a short time or stay visible until explicitly dismissed.

Comparison to Android Toast
While Toast is useful to show textual messages, it doesn't provide any style customization. MapboxStatusView can be fully customized to better match your application theme.

Use the default Status UI component​

The Status UI component consists of two main classes:

  • The Status object holds the message, whether an icon or a spinner should be visible and a duration for how long the message should appear.
  • The MapboxStatusView an Android view that renders status messages.

Adding the view to the layout​

Start by adding the MapboxStatusView to your activity or fragment layout. The sample code below positions the status UI component on top of a map.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.mapbox.maps.MapView
      android:id="@+id/mapView"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintBottom_toBottomOf="parent" />

    <com.mapbox.navigation.ui.components.status.view.MapboxStatusView
        android:id="@+id/statusView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Use the view to show status messages​

Use StatusFactory to create Status instance then call MapboxStatusView#render method to show it to the user.

MyMapActivity.kt
val myStatus = StatusFactory.buildStatus(
    message = "Voice instructions OFF", 
    duration = 2000L,
    icon = R.drawable.mapbox_ic_sound_off
)
findViewById<MapboxStatusView>(R.id.statusView).render(myStatus)

The above code will display the "Voice instructions OFF" status message for 2 seconds.

example
Show status messages

Learn how to use MapboxStatusView to show status messages.

chevron-right

Status messages can be displayed indefinitely (made sticky) by setting duration to 0. Sticky messages can be dismissed by either calling MapboxStatusView#cancel or MapboxStatusView#render with the new status.

Customize Status View​

Anatomy​

  1. Container
  2. Spinner
  3. Icon
  4. Text

Change container background and elevation​

Use android:background and android:elevation XML attributes to change background and elevation of the Container.

<com.mapbox.navigation.ui.components.status.view.MapboxStatusView
    android:id="@+id/statusView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="0dp"
    android:background="#FDD2C6" />

Change spinner tint color​

Use statusViewProgressBarTint XML attribute to change color of the Spinner.

<com.mapbox.navigation.ui.components.status.view.MapboxStatusView
    android:id="@+id/statusView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:statusViewProgressBarTint="#673AB7" />

Change icon tint color​

Use statusViewIconTint XML attribute to change color of the Icon.

<com.mapbox.navigation.ui.components.status.view.MapboxStatusView
    android:id="@+id/statusView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:statusViewIconTint="#673AB7" />

Change text appearance​

Use statusViewTextAppearance XML attribute to provide custom TextAppearance style for the Text.

<com.mapbox.navigation.ui.components.status.view.MapboxStatusView
    android:id="@+id/statusView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:statusViewTextAppearance="@style/MyStatusViewTextAppearance" />

res/values/style.xml

<style name="MyStatusViewTextAppearance">
    <item name="android:textColor">#673AB7</item>
    <item name="android:textSize">20sp</item>
    <item name="android:fontFamily">cursive</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
</style>

Change show and hide animations​

Use statusViewShowAnimator and statusViewHideAnimator XML attributes to change both show and hide animations.

<com.mapbox.navigation.ui.components.status.view.MapboxStatusView
        android:id="@+id/statusView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="0"
        android:scaleY="0"
        app:statusViewShowAnimator="@animator/scale_in"
        app:statusViewHideAnimator="@animator/scale_out" />

res/animator/scale_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:propertyName="scaleX"
        android:duration="400"
        android:valueTo="1f"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="scaleY"
        android:duration="400"
        android:valueTo="1f"
        android:valueType="floatType"/>
</set>

res/animator/scale_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:propertyName="scaleX"
        android:duration="400"
        android:valueTo="0f"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="scaleY"
        android:duration="400"
        android:valueTo="0f"
        android:valueType="floatType"/>
</set>
example
Show customized status messages

Lear how to customize MapboxStatusView to match your application theme.

chevron-right
Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?