Skip to main content

Search screen customization

The search functionality is divided into several screens, and you can override some of them by providing your own implementations written in Jetpack Compose.

For constructing the screen contents, the following classes are used:

class FullScreenSearchState {
val query: String
val suggestions: DataState<List<DashSearchSuggestion>>
val onQueryChanged: (query: String) -> Unit
val onCategorySelected: (category: SearchCategory, displayName: String) -> Unit
val onSuggestionSelected: (suggestion: DashSearchSuggestion) -> Unit
val onHistoryItemSelected: (historyItem: DashSearchResult) -> Unit
val onFeedbackClicked: () -> Unit
val onFavoritesClicked: () -> Unit
val onHomeClicked: () -> Unit
val onWorkClicked: () -> Unit
val onBackClicked: () -> Unit
val onQueryClicked: () -> Unit
val onDoneClicked: () -> Boolean
}

class FavoritesScreenState {
val onEditFavoriteClicked: (favoriteItem: DashFavoriteSearchResult) -> Unit
val onRemoveFavoriteClicked: (favoriteItem: DashFavoriteSearchResult) -> Unit
val onFavoriteSelected: (favoriteItem: DashFavoriteSearchResult) -> Unit
val onAddFavoriteClicked: () -> Unit
val onHomeClicked: () -> Unit
val onWorkClicked: () -> Unit
val onBackClicked: () -> Unit
}

class EditFavoriteScreenState {
val currentName: String
val onDoneClicked: (newName: String) -> Unit
val onBackClicked: () -> Unit
}

The user's recent destinations and favorite places can be observed using Dash.controller.observeHistory and Dash.controller.observeFavorites functions.

Customization Process

DashNavigationFragment provides three functions for search screen customization:

  • setFullScreenSearch: Overrides the search screen's initial page.
  • setFavoritesScreen: Overrides the favorites screen's initial page.
  • setEditFavoriteScreen: Overrides the screen that allows users to rename a favorite.

Each function accepts a lambda with two parameters, modifier and state. modifier is an instance of Modifier used by default implementations. state parameter depends on the screen you are overriding.

Example Usage

For real-world implementations of custom search screens, visit our GitHub repository.

You can restore default search screen implementations at any point during runtime:

fragment.setFullScreenSearch { modifier, fullScreenSearchState ->
DefaultFullScreenSearch(modifier = modifier, state = fullScreenSearchState)
}
fragment.setFavoritesScreen { modifier, favoritesScreenState ->
DefaultFavoritesScreen(modifier = modifier, state = favoritesScreenState)
}
fragment.setEditFavoriteScreen { modifier, editFavoriteScreenState ->
DefaultEditFavoriteScreen(modifier = modifier, state = editFavoriteScreenState)
}
Was this page helpful?