IconToggleButtonDefaults

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.0.0-alpha33

object IconToggleButtonDefaults

---

Contains the default values used by IconToggleButton.

Summary

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

Public properties
Dp	DefaultIconSize The default size of an icon when used inside an icon toggle button of size DefaultButtonSize.
Dp	ExtraLargeIconSize The size of an icon when used inside an icon toggle button with size ExtraLargeSize.
Dp	ExtraLargeSize The recommended size for an extra icon large toggle button.
Dp	LargeIconSize The size of an icon when used inside an icon toggle button with size LargeSize.
Dp	LargeSize The recommended size for a large icon toggle button.
Dp	Size The default size applied for icon toggle buttons.
Dp	SmallIconSize The recommended size of an icon when used inside an icon toggle button with size SmallSize.
Dp	SmallSize The recommended size for a small button.
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-alpha33

@Composable
fun animatedShapes(): IconToggleButtonShapes

Returns the default IconToggleButtonShapes with an animation between two CornerBasedShapes when pressed.

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()
        }
    }
}

animatedShapes

Added in 1.0.0-alpha33

@Composable
fun animatedShapes(
    shape: CornerBasedShape? = null,
    pressedShape: CornerBasedShape? = null
): IconToggleButtonShapes

Returns an IconToggleButtonShapes for an IconToggleButton with an 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.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()
        }
    }
}

Parameters
shape: CornerBasedShape? = null	The normal shape of the IconToggleButton when unpressed - if null, the default IconToggleButtonDefaults.shape is used.
pressedShape: CornerBasedShape? = null	The pressed shape of the IconToggleButton - if null, the default IconToggleButtonDefaults.pressedShape is used.

colors

Added in 1.0.0-alpha33

@Composable
fun colors(): IconToggleButtonColors

Returns 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.

colors

@Composable
fun colors(
    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

Returns 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.

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

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 SmallSize, returns SmallIconSize, for size ExtraLargeSize returns ExtraLargeIconSize.

Parameters
buttonSize: Dp	The size of the icon toggle button

shapes

Added in 1.0.0-alpha33

@Composable
fun shapes(): IconToggleButtonShapes

Returns the default IconToggleButtonShapes for a static IconToggleButton.

shapes

Added in 1.0.0-alpha33

@Composable
fun shapes(shape: Shape): IconToggleButtonShapes

Returns an IconToggleButtonShapes for an IconToggleButton with a static shape.

Parameters
shape: Shape	The normal shape of the IconToggleButton.

variantAnimatedShapes

Added in 1.0.0-alpha33

@Composable
fun variantAnimatedShapes(): IconToggleButtonShapes

Returns the default IconToggleButtonShapes 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.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()
        }
    }
}

variantAnimatedShapes

Added in 1.0.0-alpha33

@Composable
fun variantAnimatedShapes(
    uncheckedShape: CornerBasedShape? = null,
    checkedShape: CornerBasedShape? = null
): IconToggleButtonShapes

Returns an IconToggleButtonShapes 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.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? = null	the unchecked shape - if null, the default IconToggleButtonDefaults.shape is used.
checkedShape: CornerBasedShape? = null	the checked shape - if null, the default IconToggleButtonDefaults.checkedShape is used.

Public properties

DefaultIconSize

Added in 1.0.0-alpha33

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.

ExtraLargeIconSize

Added in 1.0.0-alpha33

val ExtraLargeIconSize: Dp

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

ExtraLargeSize

Added in 1.0.0-alpha33

val ExtraLargeSize: Dp

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

LargeIconSize

Added in 1.0.0-alpha33

val LargeIconSize: Dp

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

LargeSize

Added in 1.0.0-alpha33

val LargeSize: Dp

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

Size

Added in 1.0.0-alpha33

val Size: Dp

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

SmallIconSize

Added in 1.0.0-alpha33

val SmallIconSize: Dp

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

SmallSize

Added in 1.0.0-alpha33

val SmallSize: Dp

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

checkedShape

Added in 1.0.0-alpha33

val checkedShape: CornerBasedShape

Recommended checked Shape for IconToggleButton.

pressedShape

Added in 1.0.0-alpha33

val pressedShape: CornerBasedShape

Recommended pressed Shape for IconToggleButton.

shape

Added in 1.0.0-alpha33

val shape: RoundedCornerShape

Recommended Shape for IconToggleButton.