Lottie Animations in Jetpack Compose Android

Image copied from https://airbnb.design/lottie/

In todays article I am going to show you how you can use Lottie animations in android jetpack compose without using any layout xml tag. To use Lottie animation in android we have to declare it in xml tag. But in jetpack compose we do not create xml tags, we declare animation in @Composable function.

1st you have to add Lottie library in app level gradle file

implementation ("com.airbnb.android:lottie-compose:1.0.0-beta07-1")

After that you need to add below line in project level gradle file

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

i am assuming you will enable .kts while creating your project else you will face error in declaring above lines in gradle files.

After this you need to add below line in settings.gradle file else you will face compile time error

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

Modified settings.gradle.kts file

Now you have successfully integrated Lottie library now you need to create new directory under res and named it as raw and add Lottie animation file in this directory you can download Lottie animations from here : https://lottiefiles.com/

Now you need to declare below code in @Composable function of your activity.

I have created a variable animationSpecs which will responsible for creating the animation on screen

To make it repeat and autoplay i created a new variable called animationState and pass these two variables to LottieAnimation() function.

Finally the output: