Skip to main content

Destination preview card customization

You can override the destination preview card by providing your own UI written in Jetpack Compose.

To construct the card content, the following class is used:

DestinationPreviewUiState.kt
class DestinationPreviewUiState {
val place: DataState<PlaceDetails>
val primaryButton: ActionButton.Primary?
val secondaryButton: ActionButton.Secondary?
val backCloseButtonState: BackCloseButtonState?
}

Customization Process

The DashNavigationFragment provides the setDestinationPreview function, which allows you to define custom content for the destination preview card. This function accepts a lambda with two parameters: modifier and state. The modifier is an instance of Modifier, used by the default implementations. The state is an instance of DestinationPreviewUiState, containing all the necessary information to render the destination preview card.

Example Usage

For real-world implementations of custom destination previews, visit our GitHub repository.

You can restore the default destination preview card implementations at any point during runtime:

fragment.setDestinationPreview { modifier, _ ->
DefaultDestinationPreview(modifier)
}
Was this page helpful?