Given 3 `Text` composables in a `Column`: x Hello y How can I keep Hello centered, despite x and/o...

# compose

[Zoltan Demant]

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?

[Abhishek Sharma]

Maybe you can use Modifier.gravity(Alignment.Center) .

Something like this

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.

[Zoltan Demant]

Where does Modifier.gravity come from? I think its something that was removed from compose a good while back?

[Zun]

Curious about this as well. My initial thought would be to animate the alpha of the other views instead

[Zoltan Demant]

Oh yeah, alpha probably works, but I want to be fancy and use AnimatedVisibility 😅

[Zoltan Demant]

I guess I could also measure the Column and set its minHeight to whatever is the maximum height it has been in the past

[Abhishek Sharma]

My apologies. for that, I didn't realize it's not there anymore. Sorry for any confusion it that has caused.

[robercoding]

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?

[Zoltan Demant]

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?

[Zoltan Demant]

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).

Modifier
    .heightIn(minHeight)
    .onPlaced { coordinates ->
        minHeight = minHeight.coerceAtLeast(coordinates.size.height.dp)
    },

[Colton Idle]

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.

[Colton Idle]

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

[Rebecca Franks]

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 -

[Colton Idle]

OOOh! Thanks Rebecca!!!

[Zoltan Demant]

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?