IconToggleButtonDefaults

Artifact: androidx.wear.compose:compose-material3

object IconToggleButtonDefaults

Contains the default values used by IconToggleButton.

Summary

Public functions
`IconToggleButtonShapes`	`@Composable animatedShapes(shape: CornerBasedShape, pressedShape: CornerBasedShape)` Creates a `Shape` with a animation between two CornerBasedShapes.
`Dp`	`iconSizeFor(buttonSize: Dp)` Recommended icon size for a given icon toggle button size.
`IconToggleButtonColors`	`@Composable iconToggleButtonColors()` Creates an `IconToggleButtonColors` for a `IconToggleButton`
`IconToggleButtonColors`	`@Composable iconToggleButtonColors( checkedContainerColor: Color, checkedContentColor: Color, uncheckedContainerColor: Color, uncheckedContentColor: Color, disabledCheckedContainerColor: Color, disabledCheckedContentColor: Color, disabledUncheckedContainerColor: Color, disabledUncheckedContentColor: Color )` Creates a `IconToggleButtonColors` for a `IconToggleButton`
`IconToggleButtonShapes`	`@Composable shapes(shape: Shape)` Creates a `IconToggleButtonShapes` with a static `shape`.
`IconToggleButtonShapes`	`@Composable variantAnimatedShapes( uncheckedShape: CornerBasedShape, checkedShape: CornerBasedShape, pressedShapeCornerSizeFraction: Float )` Creates a `Shape` with an animation between three `CornerSize`s based on the pressed state and checked/unchecked.

Public properties
`Dp`	`DefaultButtonSize` The default size applied for icon toggle buttons.
`Dp`	`DefaultIconSize` The default size of an icon when used inside an icon toggle button of size DefaultButtonSize.
`Dp`	`ExtraLargeButtonSize` The recommended size for an extra icon large toggle button.
`Dp`	`ExtraLargeIconSize` The size of an icon when used inside an icon toggle button with size `ExtraLargeButtonSize`.
`Dp`	`LargeButtonSize` The recommended size for a large icon toggle button.
`Dp`	`LargeIconSize` The size of an icon when used inside an icon toggle button with size `LargeButtonSize`.
`Float`	`PressedShapeCornerSizeFraction` Recommended pressed shape corner fraction for `variantAnimatedShapes`.
`Dp`	`SmallButtonSize` The recommended size for a small button.
`Dp`	`SmallIconSize` The recommended size of an icon when used inside an icon toggle button with size `SmallButtonSize`.
`CornerBasedShape`	`checkedShape` Recommended checked `Shape` for `IconToggleButton`.
`CornerBasedShape`	`pressedShape` Recommended pressed `Shape` for `IconToggleButton`.
`RoundedCornerShape`	`shape` Recommended `Shape` for `IconToggleButton`.

Public functions

animatedShapes

Added in 1.0.0-alpha30

@Composable
fun animatedShapes(
    shape: CornerBasedShape = IconToggleButtonDefaults.shape,
    pressedShape: CornerBasedShape = IconToggleButtonDefaults.pressedShape
): IconToggleButtonShapes

Creates a Shape with a animation between two CornerBasedShapes.

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.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
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.Icon
import androidx.wear.compose.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults

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(),
    ) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }

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

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }
}

Parameters
`shape: CornerBasedShape = IconToggleButtonDefaults.shape`	The normal shape of the IconToggleButton.
`pressedShape: CornerBasedShape = IconToggleButtonDefaults.pressedShape`	The pressed shape of the IconToggleButton.

iconSizeFor

fun iconSizeFor(buttonSize: Dp): Dp

Recommended icon size for a given icon toggle button size.

Ensures that the minimum recommended icon size is applied.

Examples: for size SmallButtonSize, returns SmallIconSize, for size ExtraLargeButtonSize returns ExtraLargeIconSize.

Parameters
`buttonSize: Dp`	The size of the icon toggle button

iconToggleButtonColors

Added in 1.0.0-alpha30

@Composable
fun iconToggleButtonColors(): IconToggleButtonColors

Creates an IconToggleButtonColors for a IconToggleButton

by default, a colored background with a contrasting content color.

If the button is disabled, then the colors will have an alpha (DisabledContentAlpha and DisabledContainerAlpha) value applied.

iconToggleButtonColors

@Composable
fun iconToggleButtonColors(
    checkedContainerColor: Color = Color.Unspecified,
    checkedContentColor: Color = Color.Unspecified,
    uncheckedContainerColor: Color = Color.Unspecified,
    uncheckedContentColor: Color = Color.Unspecified,
    disabledCheckedContainerColor: Color = Color.Unspecified,
    disabledCheckedContentColor: Color = Color.Unspecified,
    disabledUncheckedContainerColor: Color = Color.Unspecified,
    disabledUncheckedContentColor: Color = Color.Unspecified
): IconToggleButtonColors

Creates a IconToggleButtonColors for a IconToggleButton

by default, a colored background with a contrasting content color.

If the button is disabled, then the colors will have an alpha (DisabledContentAlpha and DisabledContainerAlpha) value applied.

Parameters
`checkedContainerColor: Color = Color.Unspecified`	The container color of this `IconToggleButton` when enabled and checked
`checkedContentColor: Color = Color.Unspecified`	The content color of this `IconToggleButton` when enabled and checked
`uncheckedContainerColor: Color = Color.Unspecified`	The container color of this `IconToggleButton` when enabled and unchecked
`uncheckedContentColor: Color = Color.Unspecified`	The content color of this `IconToggleButton` when enabled and unchecked
`disabledCheckedContainerColor: Color = Color.Unspecified`	The container color of this `IconToggleButton` when checked and not enabled
`disabledCheckedContentColor: Color = Color.Unspecified`	The content color of this `IconToggleButton` when checked and not enabled
`disabledUncheckedContainerColor: Color = Color.Unspecified`	The container color of this `IconToggleButton` when unchecked and not enabled
`disabledUncheckedContentColor: Color = Color.Unspecified`	The content color of this `IconToggleButton` when unchecked and not enabled

shapes

Added in 1.0.0-alpha30

@Composable
fun shapes(shape: Shape = IconToggleButtonDefaults.shape): IconToggleButtonShapes

Creates a IconToggleButtonShapes with a static shape.

Parameters
`shape: Shape = IconToggleButtonDefaults.shape`	The normal shape of the IconToggleButton.

variantAnimatedShapes

Added in 1.0.0-alpha30

@Composable
fun variantAnimatedShapes(
    uncheckedShape: CornerBasedShape = shape,
    checkedShape: CornerBasedShape = this.checkedShape,
    pressedShapeCornerSizeFraction: Float = PressedShapeCornerSizeFraction
): IconToggleButtonShapes

Creates a Shape with an animation between three CornerSizes based on the pressed state and checked/unchecked.

A simple icon toggle button using the default colors, animated on Press and Check/Uncheck:

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.Icon
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
`uncheckedShape: CornerBasedShape = shape`	the unchecked shape.
`checkedShape: CornerBasedShape = this.checkedShape`	the checked shape.
`pressedShapeCornerSizeFraction: Float = PressedShapeCornerSizeFraction`	The fraction to apply to the uncheckedShape and checkedShape corner sizes, when the button is pressed. For example, the button shape animates from uncheckedShape to a new `CornerBasedShape` with corner size = uncheckedShape's corner size * pressedCornerShapeFraction. By default, the button corners are reduced in size when pressed, so that the button becomes more square.

Public properties

DefaultButtonSize

Added in 1.0.0-alpha30

val DefaultButtonSize: Dp

The default size applied for icon toggle buttons. It is recommended to apply this size using Modifier.touchTargetAwareSize.

DefaultIconSize

Added in 1.0.0-alpha30

val DefaultIconSize: Dp

The default size of an icon when used inside an icon toggle button of size DefaultButtonSize. Use iconSizeFor to easily determine the icon size.

ExtraLargeButtonSize

Added in 1.0.0-alpha30

val ExtraLargeButtonSize: Dp

The recommended size for an extra icon large toggle button. It is recommended to apply this size using Modifier.touchTargetAwareSize.

ExtraLargeIconSize

Added in 1.0.0-alpha30

val ExtraLargeIconSize: Dp

The size of an icon when used inside an icon toggle button with size ExtraLargeButtonSize. Use iconSizeFor to easily determine the icon size.

LargeButtonSize

Added in 1.0.0-alpha30

val LargeButtonSize: Dp

The recommended size for a large icon toggle button. It is recommended to apply this size using Modifier.touchTargetAwareSize.

LargeIconSize

Added in 1.0.0-alpha30

val LargeIconSize: Dp

The size of an icon when used inside an icon toggle button with size LargeButtonSize. Use iconSizeFor to easily determine the icon size.

PressedShapeCornerSizeFraction

Added in 1.0.0-alpha30

val PressedShapeCornerSizeFraction: Float

Recommended pressed shape corner fraction for variantAnimatedShapes. This fraction will be applied to checked and unchecked shapes to generate the checkedPressed and uncheckedPressed shapes.

SmallButtonSize

Added in 1.0.0-alpha30

val SmallButtonSize: Dp

The recommended size for a small button. It is recommended to apply this size using Modifier.touchTargetAwareSize.

SmallIconSize

Added in 1.0.0-alpha30

val SmallIconSize: Dp

The recommended size of an icon when used inside an icon toggle button with size SmallButtonSize. Use iconSizeFor to easily determine the icon size.

checkedShape

Added in 1.0.0-alpha30

val checkedShape: CornerBasedShape

Recommended checked Shape for IconToggleButton.

pressedShape

Added in 1.0.0-alpha30

val pressedShape: CornerBasedShape

Recommended pressed Shape for IconToggleButton.

shape

Added in 1.0.0-alpha30

val shape: RoundedCornerShape

Recommended Shape for IconToggleButton.