https://kotlinlang.org logo
Title
c

Colton Idle

07/29/2022, 11:45 AM
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?
c

Colton Idle

07/29/2022, 1:41 PM
hm. let me see if i can get this to work.
but how do you clip this ripple though?
m

MR3Y

07/29/2022, 2:22 PM
@Colton Idle Does this work?
MyItem(
    modifier = Modifier.clickable(
        interactionSource = remember{ MutableInteractionSource() },
        indication = rememberRipple()
    ) { /* handle onClick() */ }
)
c

Colton Idle

07/29/2022, 2:24 PM
let me give it a try
nope. didn't work.
Maybe I'm explaining my problem incorrectly. let me try to draw it.
m

MR3Y

07/29/2022, 3:09 PM
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
c

Colton Idle

07/29/2022, 3:35 PM
Woah. Very cool. Thanks for teaching @MR3Y