Status | Navigation SDK | Android Docs

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.

Java

Kotlin

MyMapActivity.java

Java

Kotlin



Status myStatus = StatusFactory.buildStatus(
    "Voice instructions OFF",   // message 
    2000L, // duration in millis
    true, // animated
    false, // no spinner,
    R.drawable.mapbox_ic_sound_off // icon
);
findViewById<MapboxStatusView>(R.id.statusView).render(myStatus);

MyMapActivity.kt

Java

Kotlin



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.

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

Container
Spinner
Icon
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>