Lottie Animation in Android Jetpack Compose

17 Aug, 2021
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.
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 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
@Composablefun 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 accordinglyvar isPlaying by remember {     mutableStateOf(true) }  // for speedvar speed by remember {     mutableStateOf(1f) }
Kotlin
// remember lottie composition, which// accepts the lottie composition resultval 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 is 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 ComposableColumn(        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.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.foundation.backgroundimport androidx.compose.foundation.layout.*import androidx.compose.material.Buttonimport androidx.compose.material.ButtonDefaultsimport androidx.compose.material.Textimport androidx.compose.runtime.*import androidx.compose.ui.Alignmentimport androidx.compose.ui.Modifierimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.text.font.FontStyleimport androidx.compose.ui.text.font.FontWeightimport androidx.compose.ui.unit.dpimport androidx.compose.ui.unit.spimport com.airbnb.lottie.compose.*import kotlin.math.max  class MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {                LottieExample()        }    }}  @Composablefun 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 is 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.
Android-Jetpack
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android UI Layouts
Kotlin Array
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android