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

@Preview
@Composable
fun FullScreenSearchBarScaffoldSample() {
    val textFieldState = rememberTextFieldState()
    val searchBarState = rememberSearchBarState()
    val scope = rememberCoroutineScope()
    val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
    val inputField =
        @Composable {
            SearchBarDefaults.InputField(
                modifier = Modifier,
                searchBarState = searchBarState,
                textFieldState = textFieldState,
                onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
                placeholder = { Text("Search...") },
                leadingIcon = {
                    if (searchBarState.currentValue == SearchBarValue.Expanded) {
                        IconButton(
                            onClick = { scope.launch { searchBarState.animateToCollapsed() } }
                        ) {
                            Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
                        }
                    } else {
                        Icon(Icons.Default.Search, contentDescription = null)
                    }
                },
                trailingIcon = { Icon(Icons.Default.MoreVert, contentDescription = null) },
            )
        }
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopSearchBar(
                scrollBehavior = scrollBehavior,
                state = searchBarState,
                inputField = inputField,
            )
            ExpandedFullScreenSearchBar(state = searchBarState, inputField = inputField) {
                SearchResults(
                    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),
                )
            }
        }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled