Animation in LazyColumn and LazyRow in Android Jetpack Compose

Jetpack compose 1.1.0 just got released a few days ago, It added new features in which one of them was the ability to animate items in LazyRow and LazyColumn. In this article, we will see how to animate items in LazyColumn.

Prerequisites:

• Knowledge of Kotlin.
• Knowledge of Jetpack Compose.
• Knowledge of LazyComposables

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Update dependencies 

Item placement animation was added in 1.1.0, Open build.gradle(Project level) and update compose version to 1.1.0 and Kotlin version to 1.6.10, then press sync.

Step 3: Working with MainActivity.kt

Create a composable function ListAnimations(). Create a list of items to display

Kotlin

// List of String to show in LazyColumn
var names by remember {
        mutableStateOf(
            listOf(
                "GeeksForGeeks",
                "HackerRank",
                "HackerEarth",
                "CodeChef",
                "CodeForces",
                "LeetCode",
            )
       )
}

Create Buttons to Add, Remove, Shuffle to demonstrate the animation.

Kotlin

// Buttons controls to add,remove,shuffle elements
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
   ) {
            // Button to Remove random element
            Button(
                onClick = {
                    // random number between 0<=x<names.size
                    val random = (names.indices).random()

                    // remove from random index
                    names = names.filterIndexed { index, _ ->
                        index != random
                    }
                }) {
                Text(text = "Remove")
            }

            // Button to add a random string
            Button(onClick = {
                // generate a random string
                val allowedChars = ('A'..'Z') + ('a'..'z') + ('0'..'9')
                val randomString =(1..10)
                    .map { allowedChars.random() }
                    .joinToString("")

                // add random string to the list
                names = names+randomString
            }) {
                Text(text = "Add")
            }

            // Button to shuffle the list
            Button(onClick = {
                // Shuffle
                names = names.shuffled()
            }) {
                Text(text = "Shuffle")
            }
        }

Now Create LazyColumn. There is a new modifier in the compostable inside of items function LazyColumn and LazyRow, i.e., animateItemPlacement which requires a key parameter to be passed in the items function. Refer to the comments for better understanding.

Kotlin

// LazyColumn
LazyColumn {
            // show elements using items function
            items(
                // list of items to display
                items = names,
                key = {
                it
            }) {name->

                // Text Composable to display item
                Text(
                    text = name,

                    modifier = Modifier
                        .padding(8.dp)
                        .fillMaxWidth()
                        .animateItemPlacement()
                        // Important: add this modifier.
                        // Compose will animate items placement
                        // according to the key
                )
            }
        }

Now wrap the controls and LazyColumn in a Column so they stack up. Final ListAnimation Composable will look like this

Kotlin

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListAnimation() {
    // List of String to show in LazyColumn
    var names by remember {
        mutableStateOf(
            listOf(
                "GeeksForGeeks",
                "HackerRank",
                "HackerEarth",
                "CodeChef",
                "CodeForces",
                "LeetCode",
            )
        )
    }

    Column {
        // Buttons controls to
          // add,remove,shuffle elements
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            // Button to Remove random element
            Button(
                onClick = {
                    // random number between 0<=x<names.size
                    val random = (names.indices).random()

                    // remove from random index
                    names = names.filterIndexed { index, _ ->
                        index != random
                    }
                }) {
                Text(text = "Remove")
            }

            // Button to add a random string
            Button(onClick = {
                // generate a random string
                val allowedChars = ('A'..'Z') + ('a'..'z') + ('0'..'9')
                val randomString =(1..10)
                    .map { allowedChars.random() }
                    .joinToString("")

                // add random string to the list
                names = names+randomString
            }) {
                Text(text = "Add")
            }

            // Button to shuffle the list
            Button(onClick = {
                // Shuffle
                names = names.shuffled()
            }) {
                Text(text = "Shuffle")
            }
        }

        // LazyColumn
        LazyColumn {
            // show elements using items function
            items(
                // list of items to display
                items = names,
                key = {
                it
            }) {name->
                // Text Composable to display item
                Text(
                    text = name,

                    modifier = Modifier
                        .padding(8.dp)
                        .fillMaxWidth()
                        .animateItemPlacement()
                        // Important: add this modifier.
                        // Compose will animate items placement
                        // according to the key
                )
            }
        }
    }
}

Now call this composable from setContent in MainActivity class

Kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ListAnimation()
                }
        }
    }
}

Now run this app to see the animations. 

Output: