Composable Component

IconToggleButton

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.

IconToggleButtonSample

@Composable
fun IconToggleButtonSample() {
    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()
            }
        }
    }
}

IconToggleButtonVariantSample

@Composable
fun IconToggleButtonVariantSample() {
    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()
            }
        }
    }
}