Home > database >  How to trigger ripple effect on Switch click for its container
How to trigger ripple effect on Switch click for its container

Time:06-20

I want to replicate the effect used in the Android 12 Settings app, the ripple effect is automatically triggered whenever an option is clicked (including the Switch itself) but in my app, the ripple effect does not happen at all, only the Switch animates.

@Composable
fun ComposableSettingSimpleMode() {
    val isChecked = remember { mutableStateOf(false) }

    Row(modifier = Modifier
        .fillMaxWidth()
        .clickable(onClick = {})) {
        Text(text = stringResource(id = R.string.simple_mode))
        Switch(checked = isChecked.value, onCheckedChange = {
            isChecked.value = it
        })
    }
}

CodePudding user response:

This is where you pass in your own InteractionSource

var isChecked by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }
Row(
    modifier = Modifier
        .fillMaxWidth()
        .clickable(
            interactionSource = interactionSource,
            indication = LocalIndication.current,
            onClick = {
                isChecked = !isChecked
            }
        )
) {
    Text(text = "Dummy Text", Modifier.weight(1f))
    Switch(
        checked = isChecked,
        interactionSource = interactionSource,
        onCheckedChange = {
            isChecked = it
        })
}
  • Related