How to animate list initial population in Android Jetpack compose

Question

My current Android Jetpack Compose project contains a number of lists and grids.

I would like to animate the initial population of my lists and grids to bring some life to my application.

I have found documentation for inserting, deleting etc. of items in/out of a list.

However I can not find any details for animating when the list is first displayed.

Is it possible to add animation when the list or grid is first populated?

Blucher

Answer 1

If your'e using LazyColumn you can try specifying animateItemPlacement Modifier property on composables within item{..} scope.

LazyColumn {
    items(...) {
        Box (
            modifier = Modifier.animateItemPlacement() 
        )
    }
 }

Though its experimental and you have to annotate your nearest @Composable function scope.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyComposableWithLazyColumn(…)

Samal

I didnt realise you had to "wrap" each item within the list/grid scope, should it be easy enough to have each item "bounce" horizontally as its added to the list? I can only achieve vertical animation with your suggestion – Blucher

Thank you, but I haven't experimented on it yet since its part of an experimental API, I'm just leaving it on my code to do its default functionality. Though if you look at it, it has an animationSpec parameter that you can tweak to your needs. – Samal

you should provide item keys to take advantage of re-ordering animation – Tamarra

Answer 2

Begining from version androidx.compose.foundation:1.7.0-beta05 modifier .animateItemPlacement() is deprecated.

Modifier.animateItemPlacement()

Instead of it foundation library is sharing new one:

Modifier.animateItem()

Take a look into official documentation

Simple usage - add it for composable item from LazyColumn/LazyRow:

items(
     items = games,
     key = { game -> game.id }
   ) { eachGame ->     
        Game(
            modifier = Modifier.animateItem(),
            game = eachGame
        )
    }

Cotter