How to show ripple only on a child view when the parent is clicked in compose

Question

I have this simple structure:

@Composable
public fun RadioButtonWithText() = Row(
  modifier = Modifier.selectable(
      ...
    )
) {
    RadioButton...
    Text...
  }
}

Now to make things easily accessible for the user, I set the whole Row up with Modifier.selectable, but the ripple effect that is created on the whole row does not work very well with the design of the application, so it would be better if the ripple effect was only shown on the radiobutton component, even when the whole row is pressed.
Is such a thing possible?

score 0 · Answer 1 · answered Aug 13 '23 at 14:08

I don't know very well ripple effect but maybe you can achieve this by using a combination of composables and modifiers.

@Composable
public fun RadioButtonWithText() = Row(
    modifier = Modifier
        .clickable { }
        .padding(16.dp)
) {
    RadioButton(
        selected = true, // Set the selected state as needed
        onClick = {}, // Empty onClick to prevent the whole row from being clicked
        modifier = Modifier
            .padding(end = 16.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null // Disable the default ripple effect
            ) {
                // Handle the RadioButton click here
            }
    )

    Text(
        text = "Radio Button Text",
        modifier = Modifier.clickable { /* Handle Text click if needed */ }
    )
}

How to show ripple only on a child view when the parent is clicked in compose

1 Answers1