Route callout customization

You can customize the route callout view by providing your own UI written in Jetpack Compose.

Customizing Route Callout Content

The DashNavigationFragment#setRouteCallout function allows you to define custom content for route callouts. It takes an RouteCalloutViewsUiComposer, which is a composable function with one parameter - state. The state is an instance of RouteCalloutUiState, which contains all necessary information for rendering the route callout UI.

RouteCalloutUiState

The RouteCalloutUiState class provides the state needed for the route callout. It includes:

• callout: route related data, represented as a RouteCallout, includes the related route, flag that indicates if the related route is primary, and the data about duration difference with primary route

• hasTollRoad indicates that remaining segment of the related route has toll road.
• isSuggested: indicates that the related route was suggested by the navigation engine.

• isBest: indicates that the related route considered as the best one (that means the navigation engine returned only one route without alternatives).
• isFastest: indicates that the route is the fastest one among the set of routes returned by the navigation engine.
• layerId: represents a layer id on the map which the related route is attached to.
• onClick: A callback triggered when that route callout view is clicked.

Example Usage

To set a custom route callout implementation:

fragment.setRouteCallout { state ->
    SampleRouteCalloutView(state, modifier)
}

The SampleRouteCalloutView composable customizes the route callout UI using the provided RouteCalloutUiState.

A custom composable should be wrapped up into ViewAnnotation,

besides that key composable function should be used as a wrapper around ViewAnnotation with parameters that affect recomposition:

@Composable
private fun SampleRouteCalloutViewAnnotation(
    duration: Duration,
    label: String,
    layerId: String,
    isPrimary: Boolean,
    onClick: () -> Unit,
) {
    key(
        duration,
        label,
        layerId,
        isPrimary,
    ) {
        val anchorState = remember { mutableStateOf(value = ViewAnnotationAnchor.TOP_LEFT) }
        ViewAnnotation(
            options = viewAnnotationOptions {
                ignoreCameraPadding(true)
                annotatedLayerFeature(layerId)
                annotationAnchors(
                    { anchor(ViewAnnotationAnchor.TOP_LEFT) },
                    { anchor(ViewAnnotationAnchor.TOP_RIGHT) },
                    { anchor(ViewAnnotationAnchor.BOTTOM_RIGHT) },
                    { anchor(ViewAnnotationAnchor.BOTTOM_LEFT) },
                )
            },
            onUpdatedListener = object : OnViewAnnotationUpdatedListener {
                override fun onViewAnnotationAnchorUpdated(view: View, anchor: ViewAnnotationAnchorConfig) {
                    anchorState.value = anchor.anchor
                }
            },
        ) {
            SampleRouteCalloutViewContent(
                anchor = anchorState.value,
                duration = duration,
                primary = isPrimary,
                label = label,
                onClick = onClick,
            )
        }
    }
}

To switch back to the default implementation at runtime:

fragment.setRouteCallout { state ->
    DefaultRouteCalloutView(state)
}

For practical examples, explore our Dash Android Examples repository.

この{Type}は役に立ちましたか？