Lottie Animation using Jetpack Compose

Daniel Atitienei
2 min readFeb 6, 2024

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

Now to display an animation we need to use the rememberLottieComposition and pass the file to it. Then use LottieAnimation composable and pass the composition.

@Composable
fun MyScreen() {
val composition by rememberLottieComposition(
LottieCompositionSpec.RawRes(
resId = R.raw.payment_anim
)
)
LottieAnimation(
composition = composition,
iterations = LottieConstants.IterateForever,
)
}

Other ways to display an animation

You can also pass the link directly or a path to an asset.

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

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

For the latest updates, follow me and subscribe to the newsletter. If you want to see more content, make sure to follow me on X and subscribe to my YouTube channel! Thanks for reading! 😊☕️

--

--