k

    kclerc

    2 years ago
    👋 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 changed2️⃣ How to animate a Composable height update if its child height changes
    Doris Liu

    Doris Liu

    2 years ago
    Sorry for the late reply. Somehow I missed these questions...
    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".
    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?
    k

    kclerc

    2 years ago
    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.
    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.
    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 ?