← Back to Wear Material Core
ToggleButton
Overview
Examples
Community Notes
Video
Wear Material ToggleButton that offers a single slot to take any content (text, icon or image).
ToggleButtons can be enabled or disabled. A disabled toggle button will not respond to click events.
For more information, see the Buttons(https://developer.android.com/training/wearables/components/buttons#toggle-button) guide.
@param checked Boolean flag indicating whether this toggle button is currently checked. @param onCheckedChange Callback to be invoked when this toggle button is clicked. @param modifier Modifier to be applied to the toggle button. @param enabled Controls the enabled state of the toggle button. When false
, this toggle button will not be clickable. @param backgroundColor Resolves the background for this toggle button in different states. @param border Resolves the border for this toggle button in different states. @param toggleButtonSize The default size of the toggle button unless overridden by Modifier.size. @param interactionSource The MutableInteractionSource representing the stream of Interactions for this toggle button. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions. @param shape Defines the shape for this toggle button. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme. @param content The icon, image or text to be drawn inside the toggle button.
Overloads
ToggleButton
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@Composable
fun ToggleButton(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier,
enabled: Boolean,
backgroundColor: @Composable (enabled: Boolean, checked: Boolean) -> State<Color>,
border: @Composable (enabled: Boolean, checked: Boolean) -> State<BorderStroke?>?,
toggleButtonSize: Dp,
interactionSource: MutableInteractionSource,
shape: Shape,
content: @Composable BoxScope.() -> Unit,
)
Parameters
Name | Description |
---|---|
checked | Boolean flag indicating whether this toggle button is currently checked. |
onCheckedChange | Callback to be invoked when this toggle button is clicked. |
modifier | Modifier to be applied to the toggle button. |
enabled | Controls the enabled state of the toggle button. When false , this toggle button will not be clickable. |
backgroundColor | Resolves the background for this toggle button in different states. |
border | Resolves the border for this toggle button in different states. |
toggleButtonSize | The default size of the toggle button unless overridden by Modifier.size. |
interactionSource | The MutableInteractionSource representing the stream of Interactions for this toggle button. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions. |
shape | Defines the shape for this toggle button. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme. |
content | The icon, image or text to be drawn inside the toggle button |
ToggleButton
@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@Composable
fun ToggleButton(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
label: @Composable RowScope.() -> Unit,
selectionControl: @Composable () -> Unit,
modifier: Modifier,
icon: @Composable (BoxScope.() -> Unit)?,
secondaryLabel: @Composable (RowScope.() -> Unit)?,
background: @Composable (enabled: Boolean, checked: Boolean) -> Modifier,
enabled: Boolean,
interactionSource: MutableInteractionSource,
contentPadding: PaddingValues,
shape: Shape,
selectionControlWidth: Dp,
selectionControlHeight: Dp
)
Parameters
Name | Description |
---|---|
checked | Boolean flag indicating whether this button is currently checked. |
onCheckedChange | Callback to be invoked when this buttons checked/selected status is |
label | A slot for providing the ToggleButton's main label. The contents are expected to be text which is "start" aligned. |
selectionControl | A slot for providing the ToggleButton's selection controls(s). Three built-in types of selection control are supported. |
modifier | Modifier to be applied to the ToggleButton. Pass Modifier.height(height) or Modifier.defaultMinSize(minHeight = minHeight) to set a fixed height or a minimum height for the button respectively. |
icon | An optional slot for providing an icon to indicate the purpose of the ToggleButton. |
secondaryLabel | A slot for providing the ToggleButton's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned. |
background | Composable lambda to set the background of the toggle button. This expects to return Modifier.paint or Modifier.background for the background treatment. |
enabled | Controls the enabled state of the ToggleButton. When false , this ToggleButton will not be clickable |
interactionSource | The MutableInteractionSource representing the stream of Interactions for this ToggleButton's "toggleable" tap area. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions. |
contentPadding | The spacing values to apply internally between the container and the content |
shape | Defines the ToggleButton's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
selectionControlWidth | Width for the selection control. |
selectionControlHeight | Height for the selection control |