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
// 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.
// 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.
// 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
@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
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: