I have a list item in my LazyRow that is rounded and clickable. The click goes outside of the bounds...

# compose

[Colton Idle]

I have a list item in my LazyRow that is rounded and clickable. The click goes outside of the bounds of the rounded background. The solution is "easy". Just apply a clip as well. This works great EXCEPT that my list item has a design element that is supposed to stick out the bounds of the list item. When I apply the clip to refine the click bounds ripple it also chops off this design asset.

Is there a way to clip only the touch ripple?

[MR3Y]

Modifier.indication + rememberRipple()

https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)

[Colton Idle]

hm. let me see if i can get this to work.

[Colton Idle]

but how do you clip this ripple though?

[MR3Y]

@Colton Idle Does this work?

MyItem(
    modifier = Modifier.clickable(
        interactionSource = remember{ MutableInteractionSource() },
        indication = rememberRipple()
    ) { /* handle onClick() */ }
)

[Colton Idle]

let me give it a try

[Colton Idle]

nope. didn't work.

[Colton Idle]

Maybe I'm explaining my problem incorrectly. let me try to draw it.

[MR3Y]

Hmm, I guess you need to draw a custom Indication that matches the bounds of your rounded shape and use that indication in modifier.indication , here is an example for how to do this: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]tion&ss=androidx%2Fplatform%2Fframeworks%2Fsupport:compose%2F. try it and see if it works

[Colton Idle]

Woah. Very cool. Thanks for teaching @MR3Y