Lottie Animations in Jetpack Compose Android
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:
