ExpandedFullScreenSearchBar

Composable Component

ExpandedFullScreenSearchBar represents a search bar that is currently expanding or in the expanded state, showing search results. This component is displayed in a new full-screen dialog. If this expansion behavior is undesirable, for example on medium or large screens such as tablets, ExpandedDockedSearchBar can be used instead.

Common
@ExperimentalMaterial3Api
@Composable
fun ExpandedFullScreenSearchBar(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    collapsedShape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    windowInsets: @Composable () -> WindowInsets = { SearchBarDefaults.fullScreenWindowInsets },
    properties: DialogProperties = DialogProperties(),
    content: @Composable ColumnScope.() -> Unit,
)

Parameters
state the state of the search bar. This state should also be passed to the inputField and the collapsed search bar.
inputField the input field of this search bar that allows entering a query, typically a SearchBarDefaults.InputField.
modifier the Modifier to be applied to this expanded search bar.
collapsedShape the shape of the search bar when it is collapsed. When fully expanded, the shape will always be SearchBarDefaults.fullScreenShape.
colors SearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.colors.
tonalElevation when SearchBarColors.containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
shadowElevation the elevation for the shadow below this search bar.
windowInsets the window insets that this search bar will respect when expanded.
properties the platform-specific properties to configure the dialog's behavior. Any properties which limit the dialog's size (e.g. DialogProperties.usePlatformDefaultWidth) are ignored.
content the content of this search bar to display search results below the inputField.

Code Examples

FullScreenSearchBarScaffoldSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun FullScreenSearchBarScaffoldSample() {
    val textFieldState = rememberTextFieldState()
    val searchBarState = rememberContainedSearchBarState()
    val scope = rememberCoroutineScope()
    val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
    val appBarWithSearchColors =
        SearchBarDefaults.appBarWithSearchColors(
            searchBarColors = SearchBarDefaults.containedColors(state = searchBarState)
        )
    val inputField =
        @Composable {
            SearchBarDefaults.InputField(
                textFieldState = textFieldState,
                searchBarState = searchBarState,
                colors = appBarWithSearchColors.searchBarColors.inputFieldColors,
                onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
                placeholder = {
                    Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
                },
                leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
                trailingIcon = { SampleTrailingIcon() },
            )
        }
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            AppBarWithSearch(
                scrollBehavior = scrollBehavior,
                state = searchBarState,
                colors = appBarWithSearchColors,
                inputField = inputField,
                navigationIcon = { SampleNavigationIcon(searchBarState, isAnimated = true) },
                actions = { SampleActions(searchBarState, isAnimated = true) },
            )
            ExpandedFullScreenContainedSearchBar(
                state = searchBarState,
                inputField = inputField,
                colors = appBarWithSearchColors.searchBarColors,
            ) {
                SampleSearchResults(
                    onResultClick = { result ->
                        textFieldState.setTextAndPlaceCursorAtEnd(result)
                        scope.launch { searchBarState.animateToCollapsed() }
                    }
                )
            }
        },
    ) { padding ->
        LazyColumn(contentPadding = padding, verticalArrangement = Arrangement.spacedBy(8.dp)) {
            val list = List(100) { "Text $it" }
            items(count = list.size) {
                Text(
                    text = list[it],
                    modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                )
            }
        }
    }
}