Exploring Jetpack Compose LazyList animations

The sample project

First we’ll create a simple sample project using LazyColumn without the items animation to see how it worked until now.

  1. We define a list of Items, this will be the content of our list. We use the List factory method, which calls our item factory to generate the items. We then convert this to a MutableStateList — any changes to the list will trigger a recomposition of any composables using the list.
  2. Next we define a Column for the content, as we want to display 2 main sections in this sample app, stacked vertically.
  3. The first section is the LazyColumn, which we set to take all available space by using a weight(1f) modifier.
  4. Inside the LazyColumn we use the itemsIndexed extension function — this will loop over the items in our list so that we can build the corresponding composable.
  5. For each item, we define a key — this is important when the item content is dynamic, so that the LazyColumn maintains each item state.
  6. The itemsIndexed extension takes a lambda that receives 2 arguments, the current index (which we are not using) and the item at this index. With this we build our composable for the current Item.
  7. Here we define the 2nd section or our screen, a Row.
  8. Inside this row we have a Button that shuffles the content of the list. Because we used a MutableStateList for the items, mutating the list will trigger a recomposition.
  9. We have next another Button that adds a new item to the list, at a random position.
  10. And finally we have a 3rd button that removes an item from the list, the one with the highest id.

Animating the list updates

To animate the list updates all we need to do is add 1 single line of code. When we add our items to the LazyColumn we use a Modifier to specify how to render our elements in the list; to enable list animations, all we have to do is add the modifier animateItemPlacement — it’s as simple as that. With this change, our LazyColumn becomes

Changing the animation

The animateItemPlacement modifier takes an optional animation spec — the default looks pretty nice, but we can define our own animation spec if we prefer to customize it. While you could go pretty fancy here, for this article we will simply show how you can specify your own animation, in this case, we’ll replace it with a tween with a duration of 500ms:

Conclusion

In this article we learnt how to use the new animateItemPlacement modifier to animate items in a LazyColumn or LazyRow. It’s worth of note that this feature is still experimental and subject to change, and it currently does not support LazyVerticalGrid, but it’s a great starting point to make updating lists feel more natural and engaging.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store