# ExpandedDockedSearchBarWithGap

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/ExpandedDockedSearchBarWithGap.composable#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,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, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, dropdownShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, dropdownGapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, dropdownScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, 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, properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties, 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/ExpandedDockedSearchBarWithGap.composable#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)` represents a search bar that is currently expanding or in the expanded state, showing search results. | Cmn |

## Functions

### ExpandedDockedSearchBarWithGap

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:ExpandedDockedSearchBarWithGap)

```
@Composable
fun ExpandedDockedSearchBarWithGap(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = SearchBarDefaults.dockedShape,
    dropdownShape: Shape = SearchBarDefaults.dockedDropdownShape,
    dropdownGapSize: Dp = SearchBarDefaults.dockedDropdownGapSize,
    dropdownScrimColor: Color = SearchBarDefaults.dockedDropdownScrimColor,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    properties: PopupProperties = PopupProperties(focusable = true, clippingEnabled = false),
    content: @Composable ColumnScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedDockedSearchBarWithGap.composable#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)` represents a search bar that is currently expanding or in the expanded state, showing search results. This component is displayed in a popup under (with a gap) the collapsed search bar. It is recommended to use `https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedDockedSearchBarWithGap.composable#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)` on medium and large screens such as tablets, and to instead use `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)` on compact screen such as phones.

```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.ExpandedDockedSearchBarWithGap
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarWithGapState
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 = rememberSearchBarWithGapState()
val scope = rememberCoroutineScope()
val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
val appBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors()
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) },
            actions = { SampleActions(searchBarState) },
        )
        ExpandedDockedSearchBarWithGap(state = searchBarState, inputField = inputField) {
            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#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,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. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SearchBarDefaults.dockedShape` | the shape of the container wrapping both the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)`. |
| `dropdownShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SearchBarDefaults.dockedDropdownShape` | the shape of the drop-down containing search results. |
| `dropdownGapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SearchBarDefaults.dockedDropdownGapSize` | the size of the gap between the drop-down containing search results and the search bar. |
| `dropdownScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = SearchBarDefaults.dockedDropdownScrimColor` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` that will be used for the scrim behind the drop-down. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Unspecified()` to remove it. |
| `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. |
| `properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties = PopupProperties(focusable = true, clippingEnabled = false)` | 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#ExpandedDockedSearchBarWithGap(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)`. |