Status

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 a value 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.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.java
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);

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

  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.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.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.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.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.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.