Hello! I have a clickable `Row` . It's shape has radius. I ve added `clickable` modifier and the ri...

# compose

[Vaios Tsitsonis]

Hello! I have a clickable Row . It's shape has radius. I ve added clickable modifier and the ripple effect does not respect the shape... How I can implement the desired behavior (apart from wrapping my composable with Card :P)

[Yves Kalume]

some time the order of your modifiers may affect the behavior of your composable.

[Vaios Tsitsonis]

I know... I ve added the clickable modifier last to be sure about the shape but the problem persists :S

[Louis Pullen-Freilich [G]]

How are you applying the shape to the row? You should add a clip modifier if you aren't using one to clip the ripple to the same shape

[Vaios Tsitsonis]

I ve just tried this... I am waiting for the build. Probably this was the issue as I had set the shape in the background

[Louis Pullen-Freilich [G]]

Take a look at the Material Surface implementation for an example of what to do

[Vaios Tsitsonis]

It works! thank you very much 🙂

[Colton Idle]

@Louis Pullen-Freilich [G] i do wonder if having clickable take a shape would be useful. I also have a case that I can't figure out how to setup because clip doesn't work for me (i have a piece of the UI that i dont want clipped). so just having a shape as an arg for clickable would actually be really handy. similar to how background has a shape arg.

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1659095156736129

[Louis Pullen-Freilich [G]]

I don’t see how that would help in your case, you can already do something like:

Modifier.indication(...).clip(shape).clickable()

If you want to draw the indication (ripple) outside of the bounds of the clickable. Not sure what adding shape would do here to help

[Louis Pullen-Freilich [G]]

Your use case I guess is the other way round, but this also isn’t really something that would be solvable with that either. Probably the best thing to do is just draw the person on top of the ripple-able card in a Box or something

[Colton Idle]

Nope. I don't want to draw outside of the ripple. Currently my ripple is square but my item has rounded corners so I want to clip that. When I attempt to clip it though it clips my person that is offset out of the cell.

Maybe I'll try again. Sounds like you think it should be possible. Thanks Louis

[Louis Pullen-Freilich [G]]

I don't think I understand, you don't want to draw outside of the ripple, but you want to draw the person outside of the ripple?

[Colton Idle]

Let me rephrase. I have a rounded box. With an image dead center. Rounded box is clickable. I want this ripple to be rounded as well. If I use clip modifier then this works perfectly.

Designer comes back and says. Hey can we offset the image so it peaks out from the top of the rounded box?
Sure thing. Simple change. Add an offset to the image. But now the image is clipped. So I remove the clip modifier, but now my touch ripple isn't rounded (to match the rounded Box). So I am sad. 😂

[Louis Pullen-Freilich [G]]

Right, yes that's a bit tricky. You can do it easily if you just draw the person separately on top of the rest, but then it will draw over the ripple

[Colton Idle]

Hm. Yeah. I'd like the ripple to be drawn over the person as well. I'll keep playing with it, but this is originally where I thought having a shape arg in a clickable would help.

[Louis Pullen-Freilich [G]]

That wouldn’t help here I guess

[Colton Idle]

Gotcha. Maybe I misinterpreted. Sorry for derailing. 😅

[Louis Pullen-Freilich [G]]

I think you could do this if you do:

Box {
    // clickable and ripple
    Box()
    // background and person
    Box()
}

[Louis Pullen-Freilich [G]]

So instead of clipping the whole component, you would just ‘stack’ the clickable and ripple layer on top, and clip that, and leave the layer below un-clipped

[Colton Idle]

Will give it a go. Thank you

[Colton Idle]

Gave this a shot now and my designer didn't like it because i have other composable in my widget and so they dont have the indication on them.

I'm trying to just create my own ripple, but it seems like all of that Ripple stuff is private. Any other tips before I give up?

[Colton Idle]

Edit: Nevermind. Just moved the box to the bottom of my layout so that it draws on top of everything and that worked. Phew. I still think that rememberRipple() itself could possibly just take in a shape but this looks MUCH better for now. Thanks!