Dynamic Animations with Lottie Animation in Jetpack Compose

Enhance your Jetpack Compose UI with Lottie animations using the Airbnb Lottie library

Lottie animation

Animations play a vital role in enhancing user experiences by adding a touch of interactivity and delight to your applications. When it comes to creating dynamic animations in Jetpack Compose, the Airbnb Lottie library comes to the rescue. This article will guide you through the process of integrating and utilizing the Lottie Animation library within your Jetpack Compose app, complete with code snippets and dependencies.

Dependencies

Before we begin, let’s make sure you have the necessary dependencies added to your project. Open your build.gradle file(module) and include the following dependency:

implementation "com.airbnb.android:lottie-compose:x.y.z"

Replace x.y.z with the latest version of the Lottie library.
Latest version check: Link

Compose component

@Composable
fun Loader() {
    val composition by 
        rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
    val progress by animateLottieCompositionAsState(composition)
    LottieAnimation(
        composition = composition,
        progress = { progress },
    )
}

Getting composition from various locations:

val composition1 by 
rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))

val composition2 by 
rememberLottieComposition(LottieCompositionSpec.Url("https://..."))

// src/main/assets/animations/animation.json
val composition3 by 
rememberLottieComposition(LottieCompositionSpec.Asset("animations/animation.json"))

Demo lottie json

A demo of lottie animation using the JSON file present in the below link:

Lottie animation from below JSON

JSON link: Click to download

Creating a Lottie Animation Component

To get started, let’s create a reusable Composable that will display a Lottie animation. Create a new Kotlin file, such as LottieAnimation.kt, and define the Composable function:

import androidx.compose.runtime.Composable
import com.airbnb.lottie.compose.*

@Composable
fun LottieAnimationComponent(
    animationFileName: String,
    loop: Boolean = true,
    autoPlay: Boolean = true,
    modifier: Modifier = Modifier
) {
    val composition by rememberLottieComposition(spec = LottieCompositionSpec.RawRes(animationFileName))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = if (loop) LottieConstants.IterateForever else 1,
        restartOnPlay = true,
        autoPlay = autoPlay
    )

    LottieAnimation(
        composition = composition,
        progress = progress,
        modifier = modifier
    )
}

In this Composable, we’ve defined a LottieAnimationComponent that takes the animation file name (which should be placed in the res/raw directory), loop behavior, auto-play behavior, and a modifier as parameters.

Using the Lottie Animation Component

Now that we have our LottieAnimationComponent ready, let’s see how we can use it within our Jetpack Compose UI. In your Composable function, simply call the LottieAnimationComponent and pass the appropriate parameters:

import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.yourapp.R // Replace with your app's R file
import com.example.yourapp.ui.theme.YourAppTheme // Replace with your app's theme
import com.airbnb.lottie.compose.*

@Composable
fun AnimatedScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text("Welcome to the Lottie Animation Example", style = MaterialTheme.typography.h5)
        Spacer(modifier = Modifier.height(16.dp))

        LottieAnimationComponent(
            animationFileName = "your_animation.json", // Replace with your animation file name
            loop = true,
            autoPlay = true,
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
        )

        Spacer(modifier = Modifier.height(16.dp))
        Text("Enjoy the dynamic animation in your app!", style = MaterialTheme.typography.body1)
    }
}

@Preview
@Composable
fun PreviewAnimatedScreen() {
    YourAppTheme {
        AnimatedScreen()
    }
}

Make sure to replace "your_animation.json" with the actual name of your Lottie animation file present in Raw resource folder.

Official documentation

Lottie Docs

Conclusion

With the power of the Airbnb Lottie library, creating dynamic animations in your Jetpack Compose app has never been easier. By following the steps outlined in this article, you can seamlessly integrate Lottie animations to enhance your user interface and provide a more engaging experience for your users. Whether it’s a subtle loading indicator or a complex animated illustration, Lottie Animation in Jetpack Compose opens up a world of possibilities for captivating user interactions.