Is there a way to make items in columns or rows wi...

# compose

[sindrenm]

Is there a way to make items in columns or rows with a main axis spacing arrangement animate nicely in and out? Ideally just using AnimateVisibility around the items would do the trick, but the arrangement spacing is still applied unless the item is completely gone, and that spacing doesn't animate nicely, either.

Code for this sample in thread. 🧵.

Screencast From 2025-04-02 14-32-01.mp4

[sindrenm]

@Preview
@Composable
private fun AnimatedVisibilityInListPreview() {
    Surface {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            var isSecondItemVisible by remember { mutableStateOf(true) }

            Text(
                text = "First Item",
                modifier = Modifier
                    .background(Color.LightGray)
                    .padding(8.dp),
            )

            AnimatedVisibility(isSecondItemVisible) {
                Text(
                    text = "Second Item",
                    modifier = Modifier
                        .background(Color.LightGray)
                        .padding(8.dp),
                )
            }

            Button(onClick = { isSecondItemVisible = !isSecondItemVisible }) {
                Text("Toggle Second Item Visibility")
            }
        }
    }
}

[sindrenm]

I know that adding padding modifiers to each item would solve it, but that is just plain annoying to do, and doesn't feel right semantically, either.

[dorche]

I don't think there's a way to do it with arrangement but have you considered using Spacer() s ? That's usually my preferred way of doing this, rather than padding modifiers.

[sindrenm]

That feels wrong for the same reason as using padding modifiers. Ideally, I would just tell my Column to put x dp space between each item.

[Stylianos Gakis]

When there's animation at play, I share the required spacings between the items, so that the space is part of the item itself.
I hate it, but haven't found a better way to do this.