/
Android Studio Sign in

SearchBar

Functions summary

Unit
@Composable
SearchBar(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier,
    shape: Shape,
    colors: SearchBarColors,
    tonalElevation: Dp,
    shadowElevation: Dp
)

Material Design search
Cmn
Unit
@ExperimentalMaterial3Api
@Composable
SearchBar(
    inputField: @Composable () -> Unit,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier,
    shape: Shape,
    colors: SearchBarColors,
    tonalElevation: Dp,
    shadowElevation: Dp,
    windowInsets: WindowInsets,
    content: @Composable ColumnScope.() -> Unit
)

This function is deprecated. Use SearchBar with SearchBarState, and ExpandedFullScreenSearchBar or ExpandedDockedSearchBar to display results.
Cmn
Unit
@ExperimentalMaterial3Api
@Composable
SearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    active: Boolean,
    onActiveChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    placeholder: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    colors: SearchBarColors,
    tonalElevation: Dp,
    shadowElevation: Dp,
    windowInsets: WindowInsets,
    interactionSource: MutableInteractionSource?,
    content: @Composable ColumnScope.() -> Unit
)

This function is deprecated. Use overload which takes inputField as a parameter
Cmn

Functions

SearchBar

Cmn 
@Composable
fun SearchBar(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation
): Unit

Material Design search

A search bar represents a field that allows users to enter a keyword or phrase and get relevant information. It can be used as a way to navigate through an app via search queries.

Search bar image

The SearchBar component represents a search bar in the collapsed state. It should be used in conjunction with an ExpandedFullScreenSearchBar or ExpandedDockedSearchBar to display search results when expanded.

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.ExpandedFullScreenSearchBar
import androidx.compose.material3.Icon
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.SearchBarState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics

val searchBarState = rememberSearchBarState()
val textFieldState = rememberTextFieldState()
val scope = rememberCoroutineScope()
val inputField =
    @Composable {
        SearchBarDefaults.InputField(
            textFieldState = textFieldState,
            searchBarState = searchBarState,
            onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
            placeholder = {
                Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
            },
            leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
            trailingIcon = { SampleTrailingIcon() },
        )
    }

SearchBar(state = searchBarState, inputField = inputField)
ExpandedFullScreenSearchBar(state = searchBarState, inputField = inputField) {
    SampleSearchResults(
        onResultClick = { result ->
            textFieldState.setTextAndPlaceCursorAtEnd(result)
            scope.launch { searchBarState.animateToCollapsed() }
        }
    )
}
Parameters
state: SearchBarState

the state of the search bar. This state should also be passed to the inputField and the expanded 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 search bar when collapsed.
shape: Shape = SearchBarDefaults.inputFieldShape

the shape of this search bar when collapsed.
colors: SearchBarColors = SearchBarDefaults.colors()

SearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.colors.
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.

SearchBar

Cmn 
@ExperimentalMaterial3Api
@Composable
fun SearchBar(
    inputField: @Composable () -> Unit,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
    content: @Composable ColumnScope.() -> Unit
): Unit

Material Design search

A search bar represents a floating search field that allows users to enter a keyword or phrase and get relevant information. It can be used as a way to navigate through an app via search queries.

A search bar expands into a search "view" and can be used to display dynamic suggestions or search results.

Search bar image

A SearchBar tries to occupy the entirety of its allowed size in the expanded state. For full-screen behavior as specified by Material guidelines, parent layouts of the SearchBar must not pass any Constraints that limit its size, and the host activity should set WindowCompat.setDecorFitsSystemWindows(window, false).

If this expansion behavior is undesirable, for example on large tablet screens, DockedSearchBar can be used instead.

Parameters
inputField: @Composable () -> Unit

the input field of this search bar that allows entering a query, typically a SearchBarDefaults.InputField.
expanded: Boolean

whether this search bar is expanded and showing search results.
onExpandedChange: (Boolean) -> Unit

the callback to be invoked when this search bar's expanded state is changed.
modifier: Modifier = Modifier

the Modifier to be applied to this search bar.
shape: Shape = SearchBarDefaults.inputFieldShape

the shape of this search bar when it is not expanded. When expanded, the shape will always be SearchBarDefaults.fullScreenShape.
colors: SearchBarColors = SearchBarDefaults.colors()

SearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.colors.
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: WindowInsets = SearchBarDefaults.windowInsets

the window insets that this search bar will respect
content: @Composable ColumnScope.() -> Unit

the content of this search bar to display search results below the inputField.

SearchBar

Cmn 
@ExperimentalMaterial3Api
@Composable
fun SearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    active: Boolean,
    onActiveChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
Morty Proxy This is a proxified and sanitized view of the page, visit original site.