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

Nicolai

11/12/2023, 2:31 PM
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?
image.png
k

Kirill Grouchnikov

11/12/2023, 3:26 PM
Why not do the overlay at the item level, instead of at the column level?
Ripple effects are defined like that
n

Nicolai

11/13/2023, 9:39 AM
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
k

Kirill Grouchnikov

11/13/2023, 12:05 PM
Do you have a mock of how it’s supposed to look like?
👍 1
n

Nicolai

11/13/2023, 12:08 PM
like this
k

Kirill Grouchnikov

11/13/2023, 1:12 PM
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.
n

Nicolai

11/14/2023, 7:06 AM
I’ve already questioned the UX but this is what is wanted 😕.