Animation in LazyColumn and LazyRow in Android Jetpack Compose
Last Updated :
18 Feb, 2022
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:
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
var names by remember {
mutableStateOf(
listOf(
"GeeksForGeeks" ,
"HackerRank" ,
"HackerEarth" ,
"CodeChef" ,
"CodeForces" ,
"LeetCode" ,
)
)
}
|
Create Buttons to Add, Remove, Shuffle to demonstrate the animation.
Kotlin
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Button(
onClick = {
val random = (names.indices).random()
names = names.filterIndexed { index, _ ->
index != random
}
}) {
Text(text = "Remove" )
}
Button(onClick = {
val allowedChars = ( 'A' .. 'Z' ) + ( 'a' .. 'z' ) + ( '0' .. '9' )
val randomString =( 1 .. 10 )
.map { allowedChars.random() }
.joinToString( "" )
names = names+randomString
}) {
Text(text = "Add" )
}
Button(onClick = {
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 {
items(
items = names,
key = {
it
}) {name->
Text(
text = name,
modifier = Modifier
.padding( 8 .dp)
.fillMaxWidth()
.animateItemPlacement()
)
}
}
|
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() {
var names by remember {
mutableStateOf(
listOf(
"GeeksForGeeks" ,
"HackerRank" ,
"HackerEarth" ,
"CodeChef" ,
"CodeForces" ,
"LeetCode" ,
)
)
}
Column {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Button(
onClick = {
val random = (names.indices).random()
names = names.filterIndexed { index, _ ->
index != random
}
}) {
Text(text = "Remove" )
}
Button(onClick = {
val allowedChars = ( 'A' .. 'Z' ) + ( 'a' .. 'z' ) + ( '0' .. '9' )
val randomString =( 1 .. 10 )
.map { allowedChars.random() }
.joinToString( "" )
names = names+randomString
}) {
Text(text = "Add" )
}
Button(onClick = {
names = names.shuffled()
}) {
Text(text = "Shuffle" )
}
}
LazyColumn {
items(
items = names,
key = {
it
}) {name->
Text(
text = name,
modifier = Modifier
.padding( 8 .dp)
.fillMaxWidth()
.animateItemPlacement()
)
}
}
}
}
|
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:
Share your thoughts in the comments
Please Login to comment...