How to show animate an item view in LazyColumn on Jetpack Compose Android

Question

I have a list of items in lazy column view.

How we can show animation when we are removing the one item from the list.

I need to animate the view which is getting deleted. The delete operation is done by pressing the delete icon inside the view.

I tried with AnimationVisibility and its not working as expected.

Answer 1

Update for Compose 1.1.0:

Animating item position changes are now possible but deletion/insertion animations are still not possible and need to be implemented by the method I've explained.

To animate item position changes you just have to provide the item keys in your list by key = { it.id } and use Modifier.animateItemPlacement().

Original Answer

It is not officially supported yet but they are working on it. You can probably achieve it but in a hacky way.

When your list updates, your composable is recreated and it doesn't support animations for items yet, so you have to add a boolean variable on your item and change the value when it's "deleted" instead of removing it from the list. Once the updated list is shown, you can animate the item being removed with a delay and then update the list without it once the animation is over.

I have not personally tested this method so it might not work as expected but that's the only way I can think of with lazy lists not supporting update animations.

Answer 2

Experimental ability to animate Lazy lists item positions was added.

There is a new modifier available within LazyItemScope called Modifier.animateItemPlacement().

Usage example:

var list by remember { mutableStateOf(listOf("A", "B", "C")) }
LazyColumn {
    item {
        Button(onClick = { list = list.shuffled() }) {
            Text("Shuffle")
        }
    }
    items(list, key = { it }) {
        Text("Item $it", Modifier.animateItemPlacement())
    }
}

When you provide a key via LazyListScope.item or LazyListScope.items this modifier will enable item reordering animations. Aside from item reordering all other position changes caused by events like arrangement or alignment changes will also be animated.