Lottie Animation in Android Jetpack Compose
Lottie is a great library to add animated files into your app. Two days ago Jetpack compose went stable and also Lottie supports Compose. In this article, we are going to see how to add Lottie animations in compose app.
What are we going to build in this article?
We will build a simple app showing Lottie animation with a pause/play and an increase/decrease speed button. A sample GIF is given below to get an idea about what we are going to do in this article.
Prerequisites:
- Knowledge of Android.
- Good knowledge of Jetpack compose.
Step by Step Implementation
Step 1: Create a New Project (Or use it in the existing Compose project)
- Open Android Studio( Must be of the latest version (>=2020.3.1).
- Click on New Project > Empty Compose Activity.
- Then write the Application name and package name according to your choice and click finish. Wait for Gradle build to finish.
Step 2: Adding Dependencies
Open build.gradle(app) and add the following dependency.
implementation “com.airbnb.android:lottie-compose:4.0.0”
Step 3: Downloading the Lottie file and placing it in the project
Right-click on the res > new > Android resource Directory.
Type raw to create a raw folder
Now head over to Lottie to download your favorite animation or use this article’s one (download it from here). After downloading drag and drop it to the raw folder.
Step 4: Working with Lottie Animation
Create a composable function LottieExample().
Kotlin
@Composable fun LottieExample() { // codes to be added here } |
We need to create Lottie’s composition and progress state. Add the following code in the same composable, refer to the comments for explanation.
Note: Make sure to (if Android Studio doesn’t do it automatically) import androidx.compose.runtime.*
Create a state to hold speed and play/pause state. Add the following code in the function
Kotlin
// to keep track if the animation is playing // and play pause accordingly var isPlaying by remember { mutableStateOf( true ) } // for speed var speed by remember { mutableStateOf(1f) } |
Kotlin
// remember lottie composition, which // accepts the lottie composition result val composition by rememberLottieComposition( LottieCompositionSpec // here `code` is the file name of lottie file // use it accordingly .RawRes(R.raw.code) ) // to control the animation val progress by animateLottieCompositionAsState( // pass the composition created above composition, // Iterates Forever iterations = LottieConstants.IterateForever, // pass isPlaying we created above, // changing isPlaying will recompose // Lottie and pause/play isPlaying = isPlaying, // pass speed we created above, // changing speed will increase Lottie speed = speed, // this makes animation to restart // when paused and play // pass false to continue the animation // at which it was paused restartOnPlay = false ) |
Now we need to create Buttons and lay down the Lottie composable. Add the following code in the same composable function. These are basic Columns, Rows, Buttons, and text composable. Refer to this for more information.
Kotlin
// Column Composable Column( Modifier .background(Color.White) .fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { // Heading Text( text = "Lottie" , color = Color.Gray, fontSize = 70 .sp, fontWeight = FontWeight.SemiBold, fontStyle = FontStyle.Italic, modifier = Modifier.padding( 10 .dp) ) // LottieAnimation // Pass the composition // and the progress state LottieAnimation( composition, progress, modifier = Modifier.size( 400 .dp) ) // Buttons to control the animation Row( horizontalArrangement = Arrangement.SpaceAround, modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Row( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { // Button to decrease speed Button( onClick = { // check to prevent speed going negative speed = max(speed - 0 .25f, 0f) }, // Button background color colors = ButtonDefaults.buttonColors( backgroundColor = Color( 0xFF0F9D58 ) ) ) { Text( text = "-" , color = Color.White, fontWeight = FontWeight.Bold, fontSize = 20 .sp, ) } // Button to Increase speed Text( text = "Speed ( $speed ) " , color = Color.Black, fontWeight = FontWeight.Bold, fontSize = 15 .sp, modifier = Modifier.padding(horizontal = 10 .dp) ) Button( onClick = { // Increase the speed by 0.25 speed += 0 .25f }, colors = ButtonDefaults.buttonColors( backgroundColor = Color( 0xFF0F9D58 ) ) ) { Text( text = "+" , color = Color.White, fontWeight = FontWeight.Bold, fontSize = 20 .sp ) } } // Button to pause and play Button( onClick = { // change isPlaying state to pause/play isPlaying = !isPlaying }, colors = ButtonDefaults.buttonColors( backgroundColor = Color( 0xFF0F9D58 ) ) ) { Text( // display text according to state text = if (isPlaying) "Pause" else "Play" , color = Color.White ) } } } |
And finally, call this composable from setcontent from MainActivity class.
Kotlin
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { LottieExample() } } } |
Below is the complete code for the MainActivity.kt file.
Kotlin
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.material.Button import androidx.compose.material.ButtonDefaults import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.airbnb.lottie.compose.* import kotlin.math.max class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { LottieExample() } } } @Composable fun LottieExample() { // to keep track if the animation is playing // and play pause accordingly var isPlaying by remember { mutableStateOf( true ) } // for speed var speed by remember { mutableStateOf(1f) } // remember lottie composition ,which // accepts the lottie composition result val composition by rememberLottieComposition( LottieCompositionSpec .RawRes(R.raw.code) ) // to control the animation val progress by animateLottieCompositionAsState( // pass the composition created above composition, // Iterates Forever iterations = LottieConstants.IterateForever, // pass isPlaying we created above, // changing isPlaying will recompose // Lottie and pause/play isPlaying = isPlaying, // pass speed we created above, // changing speed will increase Lottie speed = speed, // this makes animation to restart when paused and play // pass false to continue the animation at which it was paused restartOnPlay = false ) // Column Composable Column( Modifier .background(Color.White) .fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { // Heading Text( text = "Lottie" , color = Color.Gray, fontSize = 70 .sp, fontWeight = FontWeight.SemiBold, fontStyle = FontStyle.Italic, modifier = Modifier.padding( 10 .dp) ) // LottieAnimation // Pass the composition and the progress state LottieAnimation( composition, progress, modifier = Modifier.size( 400 .dp) ) // Buttons to control the animation Row( horizontalArrangement = Arrangement.SpaceAround, modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Row( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { // Button to decrease speed Button( onClick = { // check to prevent speed going negative speed = max(speed - 0 .25f, 0f) }, // Button background color colors = ButtonDefaults.buttonColors( backgroundColor = Color( 0xFF0F9D58 ) ) ) { Text( text = "-" , color = Color.White, fontWeight = FontWeight.Bold, fontSize = 20 .sp, ) } // Button to Increase speed Text( text = "Speed ( $speed ) " , color = Color.Black, fontWeight = FontWeight.Bold, fontSize = 15 .sp, modifier = Modifier.padding(horizontal = 10 .dp) ) Button( onClick = { // Increase the speed by 0.25 speed += 0 .25f }, colors = ButtonDefaults.buttonColors( backgroundColor = Color( 0xFF0F9D58 ) ) ) { Text( text = "+" , color = Color.White, fontWeight = FontWeight.Bold, fontSize = 20 .sp ) } } // Button to pause and play Button( onClick = { // change isPlaying state to pause/play isPlaying = !isPlaying }, colors = ButtonDefaults.buttonColors( backgroundColor = Color( 0xFF0F9D58 ) ) ) { Text( // display text according to state text = if (isPlaying) "Pause" else "Play" , color = Color.White ) } } } } |
Run the app and see the animation on the screen.
Output:
If having any issues, refer to the Project.
Contact Us