When the ripple animation is bounded, it works fin...

# compose

[Klaas Kabini]

When the ripple animation is bounded, it works fine on a rectangular shape but does not respect the bounds of a circular shape. In the short clip attached, you can see the animation respect the bounds on the list item not matter where you click or tap on the list item but with circular shape it is the opposite. Why is that so? Shouldn't the ripple behave the same with all shapes?

ripple.webm

[Andrey Kulikov]

Hey. there are two separate topics here. first: you want the ripple to be clipped by the circle shape. there is no way for the ripple to know the shape of the content, so you need to manually clip. For example it could work if you use Surface and provide the shape there as a param, this will automatically clip the content together with a ripple if you put your ripple inside. you can also provide borders directly for this surface. the second topic is should the ripple to be starting the animation when you tap somewhere not within the circle: the touch system doesn't know about clipping either, as it operates with boxes, and shape only affects drawing. as far as I remember it is common in other ui frameworks as well to be able to tap on a circular components even outside of them like you do in the video

[Klaas Kabini]

@Andrey Kulikov thanks for your reply. Initially I had the shape wrapped inside Surface with the Ripple wrapping the Surface. That is why it did not work. Now I have moved the Ripple to wrap around the Shape and the Surface to be the outer container. The ripple is now properly bounded and works perfectly.

[Andrey Kulikov]

great!