How to use Lottie files in Jetpack Compose

Lottie is an open-source library developed by Airbnb that allows you to easily add high-quality animations to your applications. It supports animations in the JSON format, which are created using Adobe After Effects or other animation tools.

Image from Lottie Files page, Source

To implement Lottie in Jetpack Compose, you can use the LottieAnimation composable provided by the lottie-compose library.

First use the following URL Lottie Page to create an account in Lottie files.

You can press Login and enter the page from one of your social networks or also press create account to do it from email. The workspace will be created and you will be able to select a role.

Then a modal will appear with a video that shows you how to use the page. You can see it or skip it but it is very helpful.

Select one animation, I select the first one in free community animations.

Press download and then press Save to workspace.

Select your save location and press the Save button.

Now you can download your Lottie JSON file.

Now we are going to use this JSON file in our project, but first we have to Add the lottie compose dependency in build.gradle file:

dependencies {
    implementation "com.airbnb.android:lottie-compose:6.0.0"
    
    //In .kts
    //implementation("com.airbnb.android:lottie-compose:6.0.0")
}

Copy your JSON file in the RAW folder, create one if you don’t have it.

Rename the file to avoid errors when trying to use it.

Load your Lottie animation by providing the JSON file or URL. You can use the rememberLottieComposition function to load and remember the composition.

    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.orange_skating_animation))

Add animateLottieCompositionAsStatefunction to configure the iteration. I add Iterate forever to reproduce infinitely.

val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever,
    )

Use the LottieAnimation composable to display the animation.

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

This is the complete code of the composable function.

import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.LottieConstants
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition

@Composable
fun LottieAnimationExample() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.orange_skating_animation))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever,
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
    )
}

Run your code and see the results.

There are various methods to obtain animations in addition to the “Raw” method. Lottie animations can be sourced from a URL or retrieved from an asset. For a comprehensive exploration of these options.

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"))

In the majority of scenarios, parsing failures are not common. However, in situations where you’re loading an animation from the network or attempting to load an animation from a file without the necessary permissions, failures may occur. To manage such scenarios, it’s advisable to implement appropriate error-handling mechanisms and potential retry strategies.

val retrySignal = rememberLottieRetrySignal()
val composition by rememberLottieComposition(
    LottieCompositionSpec.Url("not a url"),
    onRetry = { failCount, exception ->
        retrySignal.awaitRetry()
        // Continue retrying. Return false to stop trying.
        true
    }
)

Below you will find the url of the repository with some examples.

GitHub - munbonecci/LottieCompose: This app was created to learn more about Android compose using…

You can refer to the Github Lottie page for detailed information and examples. Until next time!