Hey guys :wave: , I’m trying to create a column of items that are clickable. When user clicks an ite...

# compose

[Nicolai]

Hey guys 👋 ,
I’m trying to create a column of items that are clickable. When user clicks an item, I want an overlay of the same column (slighty adjusted) that overlaps perfectly with the item clicked. Meaning that if users clicks the middle item that would be the middle item in the selection of reaction.
If the last item was selected the middle smiley would be the one aligning with the clicked item.
Attached another image in thread.

I’ve tried to do this with a column and then when an item is clicked I used the modifier.layout to try and move the overlay to the correct position but then it’’s cut as I can’t draw outside the bounds.

I’m thinking Compose must have an easier approach I just don’t see.

Can anyone send me in the right direction?

[Nicolai]

image.png

[Kirill Grouchnikov]

Why not do the overlay at the item level, instead of at the column level?

[Kirill Grouchnikov]

Ripple effects are defined like that

[Nicolai]

Because it needs to go outside the bounds of the view constraints. Clicking the first element mood should result in the view overlapping over How do you feel and above so the middle selection (second image) is aligned with the first element mood

[Kirill Grouchnikov]

Do you have a mock of how it’s supposed to look like?

[Nicolai]

like this

[Kirill Grouchnikov]

This might be achievable with some sort of a fake popup with transparent background. I’d question the utility of such overlays, especially drawing them over unrelated parts of the UI such as the top date bar UI to begin with.

[Nicolai]

I’ve already questioned the UX but this is what is wanted 😕.