A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the checked value, and offers a single slot for an icon or image.
@Sampled
@Composable
fun IconToggleButtonSample() {
var checked by remember { mutableStateOf(false) }
IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
Icon(
imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
contentDescription = "Localized description",
)
}
}
@Sampled
@Composable
fun CustomColorsIconToggleButtonSample() {
var checked by remember { mutableStateOf(false) }
val focusedBackgroundColor =
IconToggleButtonDefaults.focusedBackgroundColor(baseColor = Color(0xFFE3FF6F))
val checkedBackgroundColor =
IconToggleButtonDefaults.checkedBackgroundColor(baseColor = Color(0xFF34E0A1))
IconToggleButton(
checked = checked,
onCheckedChange = { checked = it },
colors =
IconToggleButtonDefaults.colors(
focusedBackgroundColor = focusedBackgroundColor,
checkedBackgroundColor = checkedBackgroundColor,
),
) {
Icon(
imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
contentDescription = "Localized description",
)
}
}