androidandroid-jetpack-composelazycolumnjetpack-compose-animation

How to animate list initial population in Android Jetpack compose


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?


Solution

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