https://kotlinlang.org logo
#compose
Title
# compose
v

Vaios Tsitsonis

08/04/2022, 11:48 AM
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)
y

Yves Kalume

08/04/2022, 11:53 AM
some time the order of your modifiers may affect the behavior of your composable.
v

Vaios Tsitsonis

08/04/2022, 11:55 AM
I know... I ve added the clickable modifier last to be sure about the shape but the problem persists :S
l

Louis Pullen-Freilich [G]

08/04/2022, 12:08 PM
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
v

Vaios Tsitsonis

08/04/2022, 12:09 PM
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
l

Louis Pullen-Freilich [G]

08/04/2022, 12:10 PM
Take a look at the Material Surface implementation for an example of what to do
v

Vaios Tsitsonis

08/04/2022, 12:14 PM
It works! thank you very much 🙂
c

Colton Idle

08/05/2022, 3:08 AM
@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
l

Louis Pullen-Freilich [G]

08/05/2022, 1:26 PM
I don’t see how that would help in your case, you can already do something like:
Copy code
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
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
c

Colton Idle

08/05/2022, 2:05 PM
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
l

Louis Pullen-Freilich [G]

08/05/2022, 2:09 PM
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?
c

Colton Idle

08/05/2022, 2:13 PM
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. 😂
l

Louis Pullen-Freilich [G]

08/05/2022, 2:16 PM
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
c

Colton Idle

08/05/2022, 2:17 PM
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.
l

Louis Pullen-Freilich [G]

08/05/2022, 2:18 PM
That wouldn’t help here I guess
c

Colton Idle

08/05/2022, 2:18 PM
Gotcha. Maybe I misinterpreted. Sorry for derailing. 😅
l

Louis Pullen-Freilich [G]

08/05/2022, 2:18 PM
I think you could do this if you do:
Copy code
Box {
    // clickable and ripple
    Box()
    // background and person
    Box()
}
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
c

Colton Idle

08/05/2022, 2:19 PM
Will give it a go. Thank you
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?
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!
7 Views