ExpandedFullScreenContainedSearchBar

Common/AllAndroid/JVM

Functions summary

Unit

@ExperimentalMaterial3ExpressiveApi @Composable ExpandedFullScreenContainedSearchBar(     state: SearchBarState,     inputField: @Composable () -> Unit,     modifier: Modifier,     collapsedShape: Shape,     colors: SearchBarColors,     tonalElevation: Dp,     shadowElevation: Dp,     windowInsets: @Composable () -> WindowInsets,     properties: DialogProperties,     content: @Composable ColumnScope.() -> Unit ) 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.

Cmn

Functions

ExpandedFullScreenContainedSearchBar

Cmn

Artifact: androidx.compose.material3:material3

View Source

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

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.

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: SearchBarState	the state of the search bar. This state should also be passed to the inputField and the collapsed search bar.
inputField: @Composable () -> Unit	the input field of this search bar that allows entering a query, typically a SearchBarDefaults.InputField.
modifier: Modifier = Modifier	the Modifier to be applied to this expanded search bar.
collapsedShape: Shape = SearchBarDefaults.inputFieldShape	the shape of the search bar when it is collapsed. When fully expanded, the shape will always be SearchBarDefaults.fullScreenShape.
colors: SearchBarColors = SearchBarDefaults.containedColors(state = state)	SearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.containedColors.
tonalElevation: Dp = SearchBarDefaults.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: Dp = SearchBarDefaults.ShadowElevation	the elevation for the shadow below this search bar.
windowInsets: @Composable () -> WindowInsets = { SearchBarDefaults.fullScreenWindowInsets }	the window insets that this search bar will respect when expanded.
properties: DialogProperties = DialogProperties()	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: @Composable ColumnScope.() -> Unit	the content of this search bar to display search results below the inputField.