IconToggleButton

Functions summary

Unit

@Composable IconToggleButton(     checked: Boolean,     onCheckedChange: (Boolean) -> Unit,     modifier: Modifier,     enabled: Boolean,     colors: IconToggleButtonColors,     interactionSource: MutableInteractionSource?,     shapes: IconToggleButtonShapes,     border: BorderStroke?,     content: @Composable BoxScope.() -> Unit ) Wear Material IconToggleButton is a filled icon toggle button which switches between primary colors and tonal colors depending on checked value, and offers a single slot for icon or image.

Functions

IconToggleButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
    shapes: IconToggleButtonShapes = IconToggleButtonDefaults.shapes(),
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material IconToggleButton is a filled icon toggle button which switches between primary colors and tonal colors depending on checked value, and offers a single slot for icon or image.

Set the size of the IconToggleButton with Modifier.touchTargetAwareSize to ensure that the background padding will correctly reach the edge of the minimum touch target. The recommended icon toggle button sizes are IconToggleButtonDefaults.Size, IconToggleButtonDefaults.SmallSize, IconToggleButtonDefaults.LargeSize and IconToggleButtonDefaults.ExtraLargeSize.

Use IconToggleButtonDefaults.iconSizeFor to determine the icon size for a given IconToggleButton size, or refer to icon sizes, IconToggleButtonDefaults.DefaultIconSize, IconToggleButtonDefaults.LargeIconSize, IconToggleButtonDefaults.ExtraLargeIconSize directly.

IconToggleButton can be enabled or disabled. A disabled button will not respond to click events. When enabled, the checked and unchecked events are propagated by onCheckedChange.

A simple icon toggle button using the default colors, animated when pressed.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults
import androidx.wear.compose.material3.samples.icons.WifiOffIcon
import androidx.wear.compose.material3.samples.icons.WifiOnIcon

var firstChecked by remember { mutableStateOf(true) }
var secondChecked by remember { mutableStateOf(false) }

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {
    IconToggleButton(
        checked = firstChecked,
        onCheckedChange = { firstChecked = !firstChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        if (firstChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }

    Spacer(modifier = Modifier.width(5.dp))

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        if (secondChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }
}

A simple icon toggle button using the default colors, animated when pressed, with different shapes and icons for the checked and unchecked states.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults
import androidx.wear.compose.material3.samples.icons.WifiOffIcon
import androidx.wear.compose.material3.samples.icons.WifiOnIcon

var firstChecked by remember { mutableStateOf(true) }
var secondChecked by remember { mutableStateOf(false) }

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {
    IconToggleButton(
        checked = firstChecked,
        onCheckedChange = { firstChecked = !firstChecked },
        shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
    ) {
        if (firstChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }

    Spacer(modifier = Modifier.width(5.dp))

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
    ) {
        if (secondChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }
}

Parameters
checked: Boolean	Boolean flag indicating whether this toggle button is currently checked.
onCheckedChange: (Boolean) -> Unit	Callback to be invoked when this toggle button is clicked.
modifier: Modifier = Modifier	Modifier to be applied to the toggle button.
enabled: Boolean = true	Controls the enabled state of the toggle button. When false, this toggle button will not be clickable.
colors: IconToggleButtonColors = IconToggleButtonDefaults.colors()	IconToggleButtonColors that will be used to resolve the container and content color for this toggle button.
interactionSource: MutableInteractionSource? = null	an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
shapes: IconToggleButtonShapes = IconToggleButtonDefaults.shapes()	Defines the shape for this toggle button. Defaults to a static shape based on IconToggleButtonDefaults.shape, but animated versions are available through IconToggleButtonDefaults.animatedShapes and IconToggleButtonDefaults.variantAnimatedShapes.
border: BorderStroke? = null	Optional BorderStroke for the IconToggleButton.
content: @Composable BoxScope.() -> Unit	The content to be drawn inside the toggle button.