How to Add Lottie Animation in Jetpack Compose | by Damar Satria Buana | Nov, 2024

1. Set Up Your Project

Start by adding the Lottie library to your build.gradle file at the app module level:

dependencies {
// other dependencies
// Lottie
implementation(libs.lottie.compose)
}

If you’re using Gradle version catalog, don’t forget to define the library name and version in libs.version.toml:

[versions]
lottieCompose = "6.6.0"
[libraries]
lottie-compose = { module = "com.airbnb.android:lottie-compose", version.ref = "lottieCompose" }

Next, find a confetti animation on LottieFiles and download it. After downloading, create a “raw” folder under res in your project directory, and save the file there with a simple name like confetti.json.

2. Creating the Animation App Composable

Now, open MainActivity.kt and create a new composable function called ConfettiAnimationApp:

@Composable
fun ConfettiAnimationApp(modifier: Modifier = Modifier) {
val voucher = "VOUCHER2024"
var isPlaying by remember { mutableStateOf(false) }
var isError by remember { mutableStateOf(false) }
Box(modifier) {
AnimatedVisibility(visible = isPlaying) {
ConfettiAnimation(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.TopCenter),
isPlaying = isPlaying
)
}
VoucherForm(
modifier = Modifier
.align(Alignment.Center)
.padding(horizontal = 16.dp),
onApply = { text ->
isError = text != voucher
if (text.isNotEmpty() && text == voucher) {
CoroutineScope(Dispatchers.Main).launch {
isPlaying = true
delay(3000L)
isPlaying = false
}
}
},
isError = isError
)
}
}

Explanation:

• ConfettiAnimationApp sets up the UI with a voucher input form and a confetti animation that plays when the form input matches the correct code.
• AnimatedVisibility helps control whether the ConfettiAnimation is visible or hidden based on the isPlaying variable.
• Finally, we set up VoucherForm to handle user input and validation.

3. Displaying the Lottie Animation

This function is the core of the animation. It’s where we load and play the Lottie file.

@Composable
fun ConfettiAnimation(modifier: Modifier = Modifier, isPlaying: Boolean = false) {
val composition by rememberLottieComposition(spec = LottieCompositionSpec.RawRes(R.raw.confetti))
LottieAnimation(
composition = composition,
modifier = modifier,
isPlaying = isPlaying,
)
}

Explanation:

• The composition variable stores the result of rememberLottieComposition, which loads the animation from R.raw.confetti.
• We then call LottieAnimation, passing in composition and isPlaying to control when the animation starts or stops.

4. Building the Voucher Input Form

The voucher input form handles the text input and checks if the voucher is correct.

@Composable
fun VoucherForm(modifier: Modifier = Modifier, onApply: (value: String) -> Unit = {}, isError: Boolean = false) {
var text by remember { mutableStateOf(TextFieldValue("")) }
Row(
modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
OutlinedTextField(
value = text,
onValueChange = { value -> text = value },
modifier = Modifier.weight(1f),
placeholder = {
Text(text = "Input Voucher")
},
isError = isError,
)
Spacer(modifier = Modifier.width(8.dp))
Button(onClick = {
onApply(text.text)
}) {
Text(text = "Apply")
}
}
}

Explanation:

• TextFieldValue manages form input.
• isError is set to true when the voucher code doesn’t match.
• A Button with onApply triggers the animation if the voucher is correct.

5. Adding Coroutine and Animation Control Logic

To keep the animation running for only 3 seconds, we use a coroutine to handle timing.

 onApply = { text ->
isError = text != voucher
if (text.isNotEmpty() && text == voucher) {
CoroutineScope(Dispatchers.Main).launch {
isPlaying = true
delay(3000L)
isPlaying = false
}
}
},

Using a coroutine here lets us set isPlaying to true for 3 seconds, then automatically set it to false. This gives a smooth transition for showing and hiding the animation.

Conclusion

And there you have it! With just a few lines of code, you’ve integrated a fun, responsive animation into your Jetpack Compose app. This approach can make any app feel more interactive and engaging without a lot of extra overhead. Try experimenting with different animations from LottieFiles or triggering animations based on other user actions for even more interactivity. Happy coding!

Explore:
What is a Lottie animation? — LottieFiles

Thank you for reading until the end. Before you go: