# ExpandedFullScreenSearchBar

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedFullScreenSearchBar.composable#ExpandedFullScreenSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function1)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarState, inputField: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, collapsedShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, windowInsets: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/DialogProperties, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedFullScreenSearchBar.composable#ExpandedFullScreenSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function1)` represents a search bar that is currently expanding or in the expanded state, showing search results. | Cmn |

## Functions

### ExpandedFullScreenSearchBar

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/SearchBar.kt+function:ExpandedFullScreenSearchBar)

```
@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
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedFullScreenSearchBar.composable#ExpandedFullScreenSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function1)` 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, `https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedDockedSearchBar.composable#ExpandedDockedSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)` can be used instead.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.AppBarWithSearch
import androidx.compose.material3.ExpandedFullScreenContainedSearchBar
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.SearchBarState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberContainedSearchBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.dp

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),
            )
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarState` | the state of the search bar. This state should also be passed to the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExpandedFullScreenSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function1)` and the collapsed search bar. |
| `inputField: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the input field of this search bar that allows entering a query, typically a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarDefaults#InputField(androidx.compose.foundation.text.input.TextFieldState,androidx.compose.material3.SearchBarState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.foundation.text.input.InputTransformation,androidx.compose.foundation.text.input.OutputTransformation,androidx.compose.foundation.ScrollState,androidx.compose.ui.graphics.Shape,androidx.compose.material3.TextFieldColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.input.TextFieldLineLimits)`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this expanded search bar. |
| `collapsedShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SearchBarDefaults.inputFieldShape` | the shape of the search bar when it is collapsed. When fully expanded, the shape will always be `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarDefaults#fullScreenShape()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors = SearchBarDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors` that will be used to resolve the colors used for this search bar in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.TextFieldColors)`. |
| `tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SearchBarDefaults.TonalElevation` | when `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors#containerColor()` is `https://developer.android.com/reference/kotlin/androidx/compose/material3/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: `https://developer.android.com/reference/kotlin/androidx/compose/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function0)`. |
| `shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SearchBarDefaults.ShadowElevation` | the elevation for the shadow below this search bar. |
| `windowInsets: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets = { SearchBarDefaults.fullScreenWindowInsets }` | the window insets that this search bar will respect when expanded. |
| `properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/DialogProperties = DialogProperties()` | the platform-specific properties to configure the dialog's behavior. Any properties which limit the dialog's size (e.g. `https://developer.android.com/reference/kotlin/androidx/compose/ui/window/DialogProperties#usePlatformDefaultWidth()`) are ignored. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this search bar to display search results below the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExpandedFullScreenSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function1)`. |