Lottie Animation in Android Jetpack Compose
Last Updated :
12 Aug, 2024
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:
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)
}
// 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.
Similar Reads
Android Jetpack Compose - Rotation Animation
Jetpack Compose is a new UI toolkit from Google used to create native Android UI. It speeds up and simplifies UI development using less code, Kotlin APIs, and powerful tools.Prerequisites:Familiar with Kotlin and OOP Concepts as wellBasic understanding of Jetpack ComposeSteps to Implement Rotation A
3 min read
Shimmer Animation in Android using Jetpack Compose
Shimmer Animation was created by Facebook to show the loading screen while images are fetched from the server. Now we see shimmer animation in lots of places. In this article, we will take a look at the implementation of shimmer animation using the all-new Jetpack Compose. A sample GIF is given belo
3 min read
Motion Layout Button in Android Jetpack Compose
Motion Layout is a special version of Constraint layout. With the help of motion layout, we can add animations to the widgets within the layout and change the position of that widget dynamically. In this article, we will take a look at How to implement Motion Layout animation on buttons in Android u
8 min read
Chat Application in Android Jetpack Compose
Chat Application are common application across Android world leading tech companies are directly or indirectly involved in such kind of Application. In this article, we will Create a Chat Application Using Android Jetpack Compose and integrate it with Firebase to enable real-time Message exchange.Pr
8 min read
Basics of Jetpack Compose in Android
Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will
5 min read
Button in Android using Jetpack Compose
Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. A Button is a UI component in Android which is used to navigate between different screens. With the help of a button, the user can interact with your app and perform multiple actions inside your a
3 min read
Canvas API in Android Jetpack Compose
Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will
4 min read
Toast in Android Jetpack Compose
In Android, a Toast is a message or a pop-up message that generally appears at the bottom of the screen for a short span. A Toast is used to deliver simple feedback about any function or operation the application is running on the device. In simpler words, it displays the status of any running or fi
2 min read
Play Audio in Android using Jetpack Compose
In Android, a MediaPlayer is used to play media files like audio and video files in the application. The MediaPlayer Class uses the MediaPlayer API for performing various functions like creating a Media Player, playing, pausing, starting, and stopping the media. In this article, we will show you how
3 min read
Create Bounce Animation on Touch in Android Jetpack Compose
In this article, we will take a look at how to create a bounce animation when the user taps anything, further it can be extended as per the use of the App.Prerequisites:Basic knowledge of KotlinBasic Knowledge of Jetpack ComposeStep by Step ImplementationStep 1: Create a New ProjectTo create a new p
2 min read