Hey, is there a way to animate between row/column ...

# compose

[Thomas Hormes]

Hey, is there a way to animate between row/column with the items moving, instead of disappearing/appearing?

[Thomas Hormes]

For example, i have a screen, like this:

@Composable
fun Test() {
    var isColumn by remember { mutableStateOf(false) }
    Column() {
        Button({ isColumn = !isColumn }) {
            Text("switch")
        }
        AnimatedContent(
            targetState = isColumn,
            label = "label",
        ) {
            if (it) {
                Column(
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxSize()
                ) {
                    Box(Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.Red)
                    )
                    Box(Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.Green)
                    )
                    Box(Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.Blue)
                    )
                }
            } else {
                Row(
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    modifier = Modifier.fillMaxSize()
                ) {
                    Box(Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.Red)
                    )
                    Box(Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.Green)
                    )
                    Box(Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .background(Color.Blue)
                    )
                }
            }
        }
    }
}

Since, the items all stay the same, I want them to move from their origin positions in the Row to their destination positions in the Column, vice versa.

[ascii]

See movableContentOf. I remember seeing official docs on this but I'm unable to find it now.

[ascii]

Here it is: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/runtime/design/movable-content.md

[Thomas Hormes]

How do I animate using this though? As far as I can see, this is primarily about preserving the internal state of a composition.

[Brian Mbigo]

Take a look at LookAheadLayout. Here is a sample that animates items between a row and a column

[ascii]

That's an old sample with old names. This is the latest; concept remains the same: https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/c[…]java/androidx/compose/ui/samples/LookaheadScopeSample.kt