SearchBarDefaults
-
Cmn
object SearchBarDefaults
Defaults used in SearchBar and DockedSearchBar.
Summary
Public functions |
||
|---|---|---|
Unit |
@ExperimentalMaterial3ApiThis function is deprecated. Use SearchBarDefaults.InputField with TextFieldState and SearchBarState. |
Cmn
|
Unit |
@ExperimentalMaterial3ApiThis function is deprecated. Use SearchBarDefaults.InputField with SearchBarState. |
Cmn
|
Unit |
@ComposableA text field to input a query in a search bar. |
Cmn
|
AppBarWithSearchColors |
@ExperimentalMaterial3ApiCreates an |
Cmn
|
SearchBarColors |
@ComposableCreates a |
Cmn
|
SearchBarColors |
@ComposableCreates a |
Cmn
|
SearchBarScrollBehavior |
@ComposableReturns a |
Cmn
|
TextFieldColors |
@ComposableCreates a |
Cmn
|
Public properties |
||
|---|---|---|
PaddingValues |
Default padding used for |
Cmn
|
Dp |
This property is deprecated. Renamed to TonalElevation. |
Cmn
|
Dp |
Default height for a search bar's input field, or a search bar in the unexpanded state. |
Cmn
|
Dp |
Default shadow elevation for a search bar. |
Cmn
|
Dp |
Default tonal elevation for a search bar. |
Cmn
|
Color |
Default container color for an |
Cmn
|
Dp |
Default gap size for a drop-down attached to a |
Cmn
|
Color |
Default scrim color for a drop-down attached to a |
Cmn
|
Shape |
Default shape for a drop-down containing search results attached to a |
Cmn
|
Shape |
Default shape for a |
Cmn
|
Color |
Default container color for an |
Cmn
|
Shape |
Default shape for a |
Cmn
|
WindowInsets |
Default window insets used and consumed by |
Cmn
|
Shape |
Default shape for a search bar's input field, or a search bar in the unexpanded state. |
Cmn
|
WindowInsets |
Default window insets for an |
Cmn
|
Public functions
InputField
@ExperimentalMaterial3Api
@Composable
funInputField(
query: String,
onQueryChange: (String) -> Unit,
onSearch: (String) -> Unit,
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
placeholder: (@Composable () -> Unit)? = null,
leadingIcon: (@Composable () -> Unit)? = null,
trailingIcon: (@Composable () -> Unit)? = null,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null
): Unit
A text field to input a query in a search bar.
This overload of InputField takes a query and onQueryChange callback to keep track of the text content. Consider using the overload which takes a TextFieldState instead.
| Parameters | |
|---|---|
query: String |
the query text to be shown in the input field. |
onQueryChange: (String) -> Unit |
the callback to be invoked when the input service updates the query. An updated text comes as a parameter of the callback. |
onSearch: (String) -> Unit |
the callback to be invoked when the input service triggers the |
expanded: Boolean |
whether the search bar is expanded and showing search results. |
onExpandedChange: (Boolean) -> Unit |
the callback to be invoked when the search bar's expanded state is changed. |
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
the enabled state of this input field. When |
placeholder: (@Composable () -> Unit)? = null |
the placeholder to be displayed when the |
leadingIcon: (@Composable () -> Unit)? = null |
the leading icon to be displayed at the start of the input field. |
trailingIcon: (@Composable () -> Unit)? = null |
the trailing icon to be displayed at the end of the input field. |
colors: TextFieldColors = inputFieldColors() |
|
interactionSource: MutableInteractionSource? = null |
an optional hoisted |
InputField
@ExperimentalMaterial3Api
@Composable
funInputField(
state: TextFieldState,
onSearch: (String) -> Unit,
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
placeholder: (@Composable () -> Unit)? = null,
leadingIcon: (@Composable () -> Unit)? = null,
trailingIcon: (@Composable () -> Unit)? = null,
prefix: (@Composable () -> Unit)? = null,
suffix: (@Composable () -> Unit)? = null,
inputTransformation: InputTransformation? = null,
outputTransformation: OutputTransformation? = null,
scrollState: ScrollState = rememberScrollState(),
shape: Shape = inputFieldShape,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null
): Unit
A text field to input a query in a search bar.
This overload of InputField uses TextFieldState to keep track of the text content and position of the cursor or selection, and expanded and onExpandedChange to keep track of the state of the search bar. It should be used with the search bar APIs which also accept expanded and onExpandedChange.
| Parameters | |
|---|---|
state: TextFieldState |
|
onSearch: (String) -> Unit |
the callback to be invoked when the input service triggers the |
expanded: Boolean |
whether the search bar is expanded and showing search results. |
onExpandedChange: (Boolean) -> Unit |
the callback to be invoked when the search bar's expanded state is changed. |
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
the enabled state of this input field. When |
readOnly: Boolean = false |
controls the editable state of the input field. When |
textStyle: TextStyle = LocalTextStyle.current |
the style to be applied to the input text. Defaults to |
placeholder: (@Composable () -> Unit)? = null |
the placeholder to be displayed when the input text is empty. |
leadingIcon: (@Composable () -> Unit)? = null |
the leading icon to be displayed at the start of the input field. |
trailingIcon: (@Composable () -> Unit)? = null |
the trailing icon to be displayed at the end of the input field. |
prefix: (@Composable () -> Unit)? = null |
the optional prefix to be displayed before the input text. |
suffix: (@Composable () -> Unit)? = null |
the optional suffix to be displayed after the input text. |
inputTransformation: InputTransformation? = null |
optional |
outputTransformation: OutputTransformation? = null |
optional |
scrollState: ScrollState = rememberScrollState() |
scroll state that manages the horizontal scroll of the input field. |
shape: Shape = inputFieldShape |
the shape of the input field. |
colors: TextFieldColors = inputFieldColors() |
|
interactionSource: MutableInteractionSource? = null |
an optional hoisted |
InputField
@Composable
fun InputField(
textFieldState: TextFieldState,
searchBarState: SearchBarState,
onSearch: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
placeholder: (@Composable () -> Unit)? = null,
leadingIcon: (@Composable () -> Unit)? = null,
trailingIcon: (@Composable () -> Unit)? = null,
prefix: (@Composable () -> Unit)? = null,
suffix: (@Composable () -> Unit)? = null,
inputTransformation: InputTransformation? = null,
outputTransformation: OutputTransformation? = null,
scrollState: ScrollState = rememberScrollState(),
shape: Shape = inputFieldShape,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
lineLimits: TextFieldLineLimits = TextFieldLineLimits.SingleLine
): Unit
A text field to input a query in a search bar.
This overload of InputField uses TextFieldState to keep track of the text content and position of the cursor or selection, and SearchBarState to keep track of the state of the search bar. It should be used with the search bar APIs which also accept a SearchBarState.
| Parameters | |
|---|---|
textFieldState: TextFieldState |
|
searchBarState: SearchBarState |
the state of the search bar as a whole. |
onSearch: (String) -> Unit |
the callback to be invoked when the input service triggers the |
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
the enabled state of this input field. When |
readOnly: Boolean = false |
controls the editable state of the input field. When |
textStyle: TextStyle = LocalTextStyle.current |
the style to be applied to the input text. Defaults to |
placeholder: (@Composable () -> Unit)? = null |
the placeholder to be displayed when the input text is empty. |
leadingIcon: (@Composable () -> Unit)? = null |
the leading icon to be displayed at the start of the input field. |
trailingIcon: (@Composable () -> Unit)? = null |
the trailing icon to be displayed at the end of the input field. |
prefix: (@Composable () -> Unit)? = null |
the optional prefix to be displayed before the input text. |
suffix: (@Composable () -> Unit)? = null |
the optional suffix to be displayed after the input text. |
inputTransformation: InputTransformation? = null |
optional |
outputTransformation: OutputTransformation? = null |
optional |
scrollState: ScrollState = rememberScrollState() |
scroll state that manages the horizontal scroll of the input field. |
shape: Shape = inputFieldShape |
the shape of the input field. |
colors: TextFieldColors = inputFieldColors() |
|
interactionSource: MutableInteractionSource? = null |
an optional hoisted |
keyboardOptions: KeyboardOptions = KeyboardOptions.Default |
software keyboard options that contains configuration such as |
lineLimits: TextFieldLineLimits = TextFieldLineLimits.SingleLine |
whether the text field should be |
appBarWithSearchColors
@ExperimentalMaterial3Api
@Composable
fun appBarWithSearchColors(
searchBarColors: SearchBarColors = colors(),
scrolledSearchBarContainerColor: Color = ColorSchemeKeyTokens.SurfaceContainerHighest.value,
appBarContainerColor: Color = AppBarTokens.ContainerColor.value,
scrolledAppBarContainerColor: Color = AppBarTokens.OnScrollContainerColor.value,
appBarNavigationIconColor: Color = AppBarTokens.LeadingIconColor.value,
appBarActionIconColor: Color = AppBarTokens.TrailingIconColor.value
): AppBarWithSearchColors
Creates an AppBarWithSearchColors that represents the different colors used in parts of the AppBarWithSearch.
| Parameters | |
|---|---|
searchBarColors: SearchBarColors = colors() |
the search bar colors |
scrolledSearchBarContainerColor: Color = ColorSchemeKeyTokens.SurfaceContainerHighest.value |
the container color of the search bar when content is scrolled |
appBarContainerColor: Color = AppBarTokens.ContainerColor.value |
the app bar container color |
scrolledAppBarContainerColor: Color = AppBarTokens.OnScrollContainerColor.value |
the app bar container color when content is scrolled |
appBarNavigationIconColor: Color = AppBarTokens.LeadingIconColor.value |
the color used for the app bar navigation icon |
appBarActionIconColor: Color = AppBarTokens.TrailingIconColor.value |
the color used for the app bar action icons |
colors
@Composable
fun colors(
containerColor: Color = SearchBarTokens.ContainerColor.value,
dividerColor: Color = SearchViewTokens.DividerColor.value,
inputFieldColors: TextFieldColors = inputFieldColors()
): SearchBarColors
Creates a SearchBarColors that represents the different colors used in parts of the search bar.
| Parameters | |
|---|---|
containerColor: Color = SearchBarTokens.ContainerColor.value |
the container color of the search bar |
dividerColor: Color = SearchViewTokens.DividerColor.value |
the color of the divider between the input field and the search results |
inputFieldColors: TextFieldColors = inputFieldColors() |
the colors of the input field. This can be accessed using |
containedColors
@Composable
fun containedColors(state: SearchBarState): SearchBarColors
Creates a SearchBarColors that represents the different colors used in parts of the search bar based on SearchBarState.
This should be used in conjunction with an ExpandedFullScreenContainedSearchBar and this value's inputFieldColors passed to the associated InputField.
| Parameters | |
|---|---|
state: SearchBarState |
the state of the search bar. |
enterAlwaysSearchBarScrollBehavior
@Composable
fun enterAlwaysSearchBarScrollBehavior(
initialOffset: Float = 0.0f,
initialOffsetLimit: Float = -Float.MAX_VALUE,
initialContentOffset: Float = 0.0f,
canScroll: () -> Boolean = { true },
snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value(),
flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay(),
reverseLayout: Boolean = false
): SearchBarScrollBehavior
Returns a SearchBarScrollBehavior. A search bar that is set up with this behavior will immediately scroll upward off-screen when the content is pulled up, and will immediately appear when the content is pulled down.
The returned SearchBarScrollBehavior is remembered across compositions.
| Parameters | |
|---|---|
initialOffset: Float = 0.0f |
the initial value for |
initialOffsetLimit: Float = -Float.MAX_VALUE |
the initial value for |
initialContentOffset: Float = 0.0f |
the initial value for |
canScroll: () -> Boolean = { true } |
a callback used to determine whether scroll events are to be handled by this |
snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value() |
an |
flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay() |
a |
reverseLayout: Boolean = false |
indicates that this behavior is applied to a scrollable content that has a reversed direction of scrolling and layout. |
inputFieldColors
@Composable
fun inputFieldColors(
focusedTextColor: Color = SearchBarTokens.InputTextColor.value,
unfocusedTextColor: Color = SearchBarTokens.InputTextColor.value,
disabledTextColor: Color = FilledTextFieldTokens.DisabledInputColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity ),
cursorColor: Color = FilledTextFieldTokens.CaretColor.value,
selectionColors: TextSelectionColors = LocalTextSelectionColors.current,
focusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
unfocusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
disabledLeadingIconColor: Color = FilledTextFieldTokens.DisabledLeadingIconColor.value.copy( alpha = FilledTextFieldTokens.DisabledLeadingIconOpacity ),
focusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
unfocusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
disabledTrailingIconColor: Color = FilledTextFieldTokens.DisabledTrailingIconColor.value.copy( alpha = FilledTextFieldTokens.DisabledTrailingIconOpacity ),
focusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value,
unfocusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value,
disabledPlaceholderColor: Color = FilledTextFieldTokens.DisabledInputColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity ),
focusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value,
unfocusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value,
disabledPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity ),
focusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value,
unfocusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value,
disabledSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity ),
focusedContainerColor: Color = Color.Transparent,
unfocusedContainerColor: Color = Color.Transparent,
disabledContainerColor: Color = Color.Transparent
): TextFieldColors
Creates a TextFieldColors that represents the different colors used in the search bar input field in different states.
Only a subset of the full list of TextFieldColors parameters are used in the input field. All other parameters have no effect.
| Parameters | |
|---|---|
focusedTextColor: Color = SearchBarTokens.InputTextColor.value |
the color used for the input text of this input field when focused |
unfocusedTextColor: Color = SearchBarTokens.InputTextColor.value |
the color used for the input text of this input field when not focused |
disabledTextColor: Color = FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
) |
the color used for the input text of this input field when disabled |
cursorColor: Color = FilledTextFieldTokens.CaretColor.value |
the cursor color for this input field |
selectionColors: TextSelectionColors = LocalTextSelectionColors.current |
the colors used when the input text of this input field is selected |
focusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value |
the leading icon color for this input field when focused |
unfocusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value |
the leading icon color for this input field when not focused |
disabledLeadingIconColor: Color = FilledTextFieldTokens.DisabledLeadingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledLeadingIconOpacity
) |
the leading icon color for this input field when disabled |
focusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value |
the trailing icon color for this input field when focused |
unfocusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value |
the trailing icon color for this input field when not focused |
disabledTrailingIconColor: Color = FilledTextFieldTokens.DisabledTrailingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledTrailingIconOpacity
) |
the trailing icon color for this input field when disabled |
focusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value |
the placeholder color for this input field when focused |
unfocusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value |
the placeholder color for this input field when not focused |
disabledPlaceholderColor: Color = FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
) |
the placeholder color for this input field when disabled |
focusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value |
the prefix color for this input field when focused |
unfocusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value |
the prefix color for this input field when not focused |
disabledPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
) |
the prefix color for this input field when disabled |
focusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value |
the suffix color for this input field when focused |
unfocusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value |
the suffix color for this input field when not focused |
disabledSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
) |
the suffix color for this input field when disabled |
focusedContainerColor: Color = Color.Transparent |
the container color for this input field when focused |
unfocusedContainerColor: Color = Color.Transparent |
the container color for this input field when not focused |
disabledContainerColor: Color = Color.Transparent |
the container color for this input field when disabled |
Public properties
AppBarContentPadding
val AppBarContentPadding: PaddingValues
Default padding used for AppBarWithSearch content
InputFieldHeight
val InputFieldHeight: Dp
Default height for a search bar's input field, or a search bar in the unexpanded state.
collapsedContainedSearchBarColor
val collapsedContainedSearchBarColor: Color
Default container color for an ExpandedFullScreenContainedSearchBar in the collapsed state.
dockedDropdownGapSize
val dockedDropdownGapSize: Dp
Default gap size for a drop-down attached to a DockedSearchBar.
dockedDropdownScrimColor
val dockedDropdownScrimColor: Color
Default scrim color for a drop-down attached to a DockedSearchBar.
dockedDropdownShape
val dockedDropdownShape: Shape
Default shape for a drop-down containing search results attached to a DockedSearchBar.
fullScreenContainedSearchBarColor
val fullScreenContainedSearchBarColor: Color
Default container color for an ExpandedFullScreenContainedSearchBar in the expanded state.
fullScreenWindowInsets
val fullScreenWindowInsets: WindowInsets
Default window insets used and consumed by ExpandedFullScreenSearchBar.
inputFieldShape
val inputFieldShape: Shape
Default shape for a search bar's input field, or a search bar in the unexpanded state.