ExpandedDockedSearchBarWithGap

`ExpandedDockedSearchBarWithGap` represents a search bar that is currently expanding or in the

ExpandedDockedSearchBarWithGap

Composable Component

ExpandedDockedSearchBarWithGap 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 ExpandedDockedSearchBarWithGap on medium and large screens such as tablets, and to instead use ExpandedFullScreenSearchBar on compact screen such as phones.

Common
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ExpandedDockedSearchBarWithGap(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dropdownShape: Shape = SearchBarDefaults.dockedDropdownShape,
    dropdownGapSize: Dp = SearchBarDefaults.dockedDropdownGapSize,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    properties: PopupProperties = PopupProperties(focusable = true, clippingEnabled = false),
    content: @Composable ColumnScope.() -> Unit,
) =
    ExpandedDockedSearchBarImpl(state = state, properties = properties) { focusRequester ->
        DockedSearchBarLayout(
            state = state,
            inputField = {
                Box(
                    modifier = Modifier.focusRequester(focusRequester),
                    propagateMinConstraints = true,
                ) {
                    inputField()
                }
            },
            modifier = modifier,
            searchBarShape = RectangleShape,
            dropdownShape = dropdownShape,
            dropdownGapSize = dropdownGapSize,
            colors = colors,
            tonalElevation = tonalElevation,
            shadowElevation = shadowElevation,
            content = content,
        )
    }

Parameters

statethe state of the search bar. This state should also be passed to the inputField and the collapsed search bar.
inputFieldthe input field of this search bar that allows entering a query, typically a SearchBarDefaults.InputField.
modifierthe Modifier to be applied to this expanded search bar.
dropdownShapethe shape of the drop-down containing search results.
dropdownGapSizethe size of the gap between the drop-down containing search results and the search bar.
colorsSearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.colors.
tonalElevationwhen 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.
shadowElevationthe elevation for the shadow below this search bar.
propertiesthe platform-specific properties to configure the dialog's behavior. Any properties which limit the dialog's size (e.g. DialogProperties.usePlatformDefaultWidth) are ignored.
contentthe content of this search bar to display search results below the inputField.

Code Examples

DockedSearchBarScaffoldSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun DockedSearchBarScaffoldSample() {
    val textFieldState = rememberTextFieldState()
    val searchBarState = rememberSearchBarState()
    val scope = rememberCoroutineScope()
    val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
    val appBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors()
    val inputField =
        @Composable {
            SearchBarDefaults.InputField(
                searchBarState = searchBarState,
                textFieldState = textFieldState,
                onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
                placeholder = {
                    if (searchBarState.currentValue == SearchBarValue.Collapsed) {
                        Text(
                            modifier = Modifier.fillMaxWidth().clearAndSetSemantics {},
                            text = "Search",
                            textAlign = TextAlign.Center,
                        )
                    }
                },
            )
        }
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            AppBarWithSearch(
                scrollBehavior = scrollBehavior,
                state = searchBarState,
                inputField = inputField,
                navigationIcon = {
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = { PlainTooltip { Text("Menu") } },
                        state = rememberTooltipState(),
                    ) {
                        IconButton(onClick = { /* doSomething() */ }) {
                            Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                },
                actions = {
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = { PlainTooltip { Text("Account") } },
                        state = rememberTooltipState(),
                    ) {
                        IconButton(onClick = { /* doSomething() */ }) {
                            Icon(
                                imageVector = Icons.Default.AccountCircle,
                                contentDescription = "Account",
                            )
                        }
                    }
                },
                colors = appBarWithSearchColors,
            )
            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),
                )
            }
        }
    }
}

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