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.
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.
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
Step 4: Working with Lottie Animation
Create a composable function LottieExample().
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
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.
And finally, call this composable from setcontent from MainActivity class.
Below is the complete code for the MainActivity.kt file.
Run the app and see the animation on the screen.