Hey everyone, I have a question about compose ripples. I have a Radio button in a row, and when the ...

# compose

[Thomas Dougherty]

Hey everyone, I have a question about compose ripples. I have a Radio button in a row, and when the row or button is selected, I want the ripple to show in the entire row. Currently I have that working, except when they click on the radio button itself, when they do that it shows the circular ripple around the radio button. I can disable that ripple with a dummy interaction source, but then I get no row ripple. How can I make it so when they click the radio button it ripples for the whole row?

[Thomas Dougherty]

Current code:

Row(
                Modifier
                .fillMaxWidth()
                .selectable(
                    selected = (text == selected),
                    onClick = { if(enabled) onSelection(text, index) }
                )
                .padding(vertical = rowSpacing)
            ) {
                RadioButton(
                    selected = (text == selected),
                    enabled = enabled,
                    interactionSource = remember { DisabledInteractionSource() },
                    onClick = { onSelection(text, index) }
                )

[Thomas Dougherty]

Figured it out, haha. If I set onClick in radio button to null, I can just handle the clicks on the row. I’ll leave this here incase someone needs it in the future.

[Tash]

Oh yeah 🙂 There's also an explanation in https://developer.android.com/jetpack/compose/accessibility#common-cases
but with Checkbox as an example