Skip to main content

Show customized status messages

Additional Developer Resources
Note

This example is a part of the Navigation SDK Examples. You can find the values for all referenced resources in the res directory. For example, see res/values/strings.xml for R.string.* references used in this example. The dependencies can be found here.The examples use View binding.See setup documention if necessary.

mapbox_activity_show_custom_status.xml
github View on GitHub
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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"
        tools:background="#00ccff" />

    <com.mapbox.navigation.ui.components.status.view.MapboxStatusView
        style="@style/MapboxCustomStatusView"
        android:id="@+id/statusView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:scaleX="1"
        tools:scaleY="1"/>

</androidx.constraintlayout.widget.ConstraintLayout>
ShowCustomStatusActivity.kt
github View on GitHub
package com.mapbox.navigation.examples.standalone.status

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.maps.Style.Companion.MAPBOX_STREETS
import com.mapbox.maps.plugin.gestures.OnMapClickListener
import com.mapbox.maps.plugin.gestures.gestures
import com.mapbox.maps.plugin.scalebar.scalebar
import com.mapbox.navigation.base.ExperimentalMapboxNavigationAPI
import com.mapbox.navigation.examples.R
import com.mapbox.navigation.examples.databinding.MapboxActivityShowCustomStatusBinding
import com.mapbox.navigation.ui.components.status.model.StatusFactory.buildStatus
import com.mapbox.navigation.ui.components.status.view.MapboxStatusView
import javax.net.ssl.SSLEngineResult.Status

/**
 * In this example you can learn how to customize [MapboxStatusView] and use it to show
 * different types of [Status] messages.
 *
 * You can cycle through status messages by tapping anywhere on the map.
 */
@OptIn(ExperimentalMapboxNavigationAPI::class)
class ShowCustomStatusActivity : AppCompatActivity() {

    private lateinit var binding: MapboxActivityShowCustomStatusBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = MapboxActivityShowCustomStatusBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.mapView.apply {
            scalebar.enabled = false
            gestures.addOnMapClickListener(onMapClickListener)
            mapboxMap.loadStyle(MAPBOX_STREETS)
        }
    }

    private val statusMessages = mutableListOf(
        buildStatus(
            message = "Just text status",
            duration = 2000,
        ),
        buildStatus(
            message = "Status with text and a spinner",
            duration = 2000,
            spinner = true
        ),
        buildStatus(
            message = "Status with text and an icon",
            duration = 2000,
            icon = R.drawable.mapbox_ic_sound_off
        ),
        buildStatus(
            message = "Sticky status",
            duration = 0
        ),
        buildStatus(
            message = "Sticky status (without animation)",
            duration = 0,
            animated = false
        )
    )

    private fun nextStatusMessage() = statusMessages.removeFirst().also {
        // adding back to the queue
        statusMessages.add(it)
    }

    private val onMapClickListener = OnMapClickListener {
        // show next status message on map click
        binding.statusView.render(nextStatusMessage())

        false
    }
}
styles_status.xml
github View on GitHub
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MapboxCustomStatusView" parent="MapboxStyleStatusView">
    <item name="android:elevation">0dp</item>
    <item name="android:background">#673AB7</item>
    <item name="android:scaleX">0</item>
    <item name="android:scaleY">0</item>
    <item name="android:padding">10dp</item>
    <item name="statusViewShowAnimator">@animator/scale_in</item>
    <item name="statusViewHideAnimator">@animator/scale_out</item>
    <item name="statusViewProgressBarTint">#ffffff</item>
    <item name="statusViewIconTint">#ffffff</item>
    <item name="statusViewTextAppearance">@style/MapboxCustomStatusView.TextAppearance</item>
  </style>

  <style name="MapboxCustomStatusView.TextAppearance">
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">16sp</item>
    <item name="android:fontFamily">cursive</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
  </style>
</resources>
Additional Developer Resources
Was this example helpful?