---
title: "ExpandedFullScreenContainedSearchBar"
description: "`ExpandedFullScreenContainedSearchBar` represents a search bar that is currently expanding or in
the expanded state, showing search results, preserving the collapsed shape of the `inputField`
without divider. 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."
type: "component"
---

<div class='type'>Composable Component</div>



`ExpandedFullScreenContainedSearchBar` represents a search bar that is currently expanding or in
the expanded state, showing search results, preserving the collapsed shape of the `inputField`
without divider. 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.

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ExpandedFullScreenContainedSearchBar(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    collapsedShape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.containedColors(state = state),
    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.containedColors`. |
| 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
```kotlin
@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),
                )
            }
        }
    }
}
```