Lottie Animation using Jetpack Compose

Grab a coffee ☕, and let’s see various methods on how to add Lottie animations in your app using Jetpack Compose.

Getting Started

Add the dependency to your project :app/build.gradle.kts file.

dependencies {
    implementation("com.airbnb.android:lottie-compose:6.3.0")
}

Now go to the project build.gradle.kts and add this.

allprojects {
    repositories {
        maven { url = uri("https://oss.sonatype.org/content/repositories/snapshots/") }
    }
}

One more thing left is to go to the settings.gradle.kts and add the maven repository.

dependencyResolutionManagement {
    // Remove the FAIL_ON_PROJECT_REPOS
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS) // Add this
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") } // Add this
    }
}

Display a JSON animation

To add a JSON animation to your project make sure that you add it to the raw folder. Here is how to create it.

Creating the raw folder