Is it possible to declare that a ripple should extend beyond the bounds of the clickable layout? For...

# compose

[Zoltan Demant]

Is it possible to declare that a ripple should extend beyond the bounds of the clickable layout?
For example: the text below. I cant add any more padding to it.. so the ripple is tiny and just looks quirky. Back in the day Id use something like ?selectableItemBackground, but ripple(bounded=false) doesnt really do much for me here.

[Jonathan]

Do you have a Modifier.border(..) or Modifier.background(shape = …) after your Modifier.clickable()? I believe both of those modifiers will clip the ripple.

[Zoltan Demant]

I use background + clip, but clickable comes last in the modifier chain. For sanity, Ive tried removing clip and all the other modifiers, still seeing the exact same behavior.

Also, docs on ripple(bounded=false) below.. Im not sure if theyre supposed to behave like what selectableBackgroundBorderless did back in the day.

bounded - If true, ripples are clipped by the bounds of the target layout. Unbounded ripples always animate from the target layout center, bounded ripples animate from the touch position.

[Jonathan]

Sounds like this could be a bug.

[Zoltan Demant]

Great! 😄 When I ask AI about it, seems to just be that the layout needs a bigger size for the unbounded behavior to work.. but that was never the case with ?selectableItemBackgroundBorderless.

[Zoltan Demant]

Only other, hacky solution I can think of is adding padding to the text, then using the same value as offset..

[Zoltan Demant]

But dunno if I like that

[Louis Pullen-Freilich [G]]

You probably want to set a larger radius on the ripple explicitly

[Zoltan Demant]

Thanks, that actually works.. if I put the clip modifier after my clickable one! If my understanding is correct, to support both cases Id need:
• bounded=true with clip + clickable
• bounded=false with clickable + clip

[Louis Pullen-Freilich [G]]

What are you clipping here? The clip also affects the touch bounds, so it might reduce the clickable area

[Louis Pullen-Freilich [G]]

Can you share any code for this? And what is your expected behavior in terms of click / ripple area?

[Zoltan Demant]

I think the underlying issue for me is that Im trying to reuse a component from my design system for this purpose too.. when its obviously not a good fit. The component is like a surface, hence me wanting clip before clickable.

[Zoltan Demant]

If I just create a new component for this purpose, it should automatically solve my issues 🙂

[Louis Pullen-Freilich [G]]

You can alternatively just add padding between the text and the 'surface' component, to allow the ripple to fill up a larger area

[Zoltan Demant]

Yup, but I cant really add more padding w/o say.. using offset so that things are placed in the same spot again!

[Zoltan Demant]

Im really glad the unbounded ripple works, just feels so much more intuitive when clickable areas light up (and look good).