:wave: I have 2 questions about animating things :...

# compose

[kclerc]

👋
I have 2 questions about animating things :
1️⃣ How to animate a Composable height from “wrap-content” to 0dp ? We could use the animate api to update scaleY from 1 to 0 but in a Column, the view would just be like “invisible” and not “gone” right ? I mean, elements after the resized one will not go up as the scaleY is changed
2️⃣ How to animate a Composable height update if its child height changes

[Doris Liu]

Sorry for the late reply. Somehow I missed these questions...

[Doris Liu]

For 1), it depends on the effect you are after: whether the height should be scaled down to 0, or should the composable be clipped. Either way they won't be "gone".

[Doris Liu]

As for question 2), I would love to know a bit more about what you try to achieve. Is the parent defined with a Modifier.wrapContentSize/Height?

[kclerc]

I was trying to do something like that :
https://github.com/skydoves/ExpandableLayout

I have a parent composable (lets name it ExandableComposable) to which I can pass any composable children to show when expanded.
Without any animation it works properly, no problem.

But I want the children to appear with an expanding animation, thus question 1. And I want any composable below my Exandable to smoothly move as the previous one expands, thus question 2.

[kclerc]

I’ve also asked a question on stackoverflow concerning composable animations :
https://stackoverflow.com/questions/62376589/how-to-animate-width-of-a-button-in-jetpack-compose

It’s still about animating a parent when its child changes.
In the mean time, constraint layout was added to compose. Does it embed automatic animations when its content changes ?

I’m not kean on xml property “animateLayoutChanges” but this is this kind of behavior I want to reproduce.

[kclerc]

The other point of view would be to directly animate children width, isn’t it ?
In the following example :

@Composable fun MyContainer() {
    val (isLoading, setIsLoading) = state { false }
    val width = animate(target = if (isLoading) [Retrieve A width] else [Retrieve B width])

    Button(
        onClick = setIsLoading,
        text = {
            if (isLoading) {
                A(modifier = Modifier.preferredWidth(width))
            } else {
                B(modifier = Modifier.preferredWidth(width))
            }
        }
    )
}

(it may be better to apply the modifier once to Button)

Is there a way to “measure” A and B without having them displayed ?