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?

score 1 · Accepted Answer · answered Nov 23 '22 at 15:36

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(…)

answered Nov 23 '22 at 15:36

z.g.y

1

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 – Hector Nov 23 '22 at 15:55
1

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. – z.g.y Nov 23 '22 at 16:28

1 Answers1