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

Zoltan Demant

01/12/2023, 9:59 AM
Given 3
Text
composables in a `Column`: x Hello y How can I keep Hello centered, despite x and/or y animating out of existence sometimes? Custom layout?
a

Abhishek Sharma

01/12/2023, 10:07 AM
Maybe you can use
Modifier.gravity(Alignment.Center)
. Something like this
Copy code
Column {
    Text(text = "x", modifier = Modifier.animate(visibility = xVisibility))
    Text(text = "Hello", modifier = Modifier.gravity(Alignment.Center))
    Text(text = "y", modifier = Modifier.animate(visibility = yVisibility))
}
P.S: I didn't test it.
z

Zoltan Demant

01/12/2023, 10:13 AM
Where does Modifier.gravity come from? I think its something that was removed from compose a good while back?
z

Zun

01/12/2023, 10:15 AM
Curious about this as well. My initial thought would be to animate the alpha of the other views instead
z

Zoltan Demant

01/12/2023, 10:16 AM
Oh yeah, alpha probably works, but I want to be fancy and use AnimatedVisibility 😅
I guess I could also measure the Column and set its minHeight to whatever is the maximum height it has been in the past
a

Abhishek Sharma

01/12/2023, 10:23 AM
My apologies. for that, I didn't realize it's not there anymore. Sorry for any confusion it that has caused.
r

robercoding

01/12/2023, 11:07 AM
I wonder if you have a snippet code or a video with the current animation to see how it looks When you say animation out of existence, is it moving or increasing the text size, like
0.sp
to
16.dp
? But I see possible solutions like: • Measuring the height previously and then setting it each single item its own size? • Or maybe graphics layer to not affect other content
layout
positions?
z

Zoltan Demant

01/12/2023, 12:06 PM
For sake of simplicity, you could say that both components are shown/hidden using a
if (visible) {}
. One thing that complicates things quite a bit is that x & y might not be visible initially, so measuring doesnt really work, the middle item will move down to account for x being visible, etc. I think
Layout
is my only option?
I can get the behavior Im looking for using this, but it only works if x & y have both been visible first (otherwise they will push Hello down/up when becoming visible).
Copy code
Modifier
    .heightIn(minHeight)
    .onPlaced { coordinates ->
        minHeight = minHeight.coerceAtLeast(coordinates.size.height.dp)
    },
c

Colton Idle

01/12/2023, 1:37 PM
I also had an issue with this when trying to use ANimatedVisibility. No real easy solution that I found a while back and just went the alpha approach. Another approah I took was to copy AnimatedVisibility and I made a new one in my code with just enough tweaks to keep things from shifting.
oh actually it seemed to be for Crossfade instead. not sure if you'll find this helpful but here was the issue I opened: https://issuetracker.google.com/issues/206972670
r

Rebecca Franks

01/12/2023, 1:48 PM
There is an open issue for adding a visible modifier to keep the size in place but hide the contents https://issuetracker.google.com/issues/158837937 but you could create a modifier that still does layout, but doesn't call placement -
c

Colton Idle

01/12/2023, 2:19 PM
OOOh! Thanks Rebecca!!!
z

Zoltan Demant

01/12/2023, 2:44 PM
Thanks, both of those options kinda work. Id really really like to keep using ContentTransform, I dont think I can recreate the animations without it so I might just have to copy and adjust the code 😞 Another idea, wouldnt it be possible to just use a Box that aligns Hello in the center, then offsetting the items above/below it accordingly? I played around with this briefly earlier today, it didnt align as well as Column does for some reason - but in theory I think it should work and that I just overlooked something else?
3 Views