lottie animation android tutorial

The use of lottie animation library(developed by Airbnb) has been rising significantly in the past couple of years. This is mainly because it parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web.

The animations can be created in Adobe After Effects and then exported as a json file so that it can be added to android. You may check here for some cool animations which are available for free download.

Implementation guidelines :

First of all goto your app level build.gradle file and add the below dependency inside dependency {}

implementation 'com.airbnb.android:lottie:2.6.1'

we have used lottie version 2.6.1, please check here for the latest  lottie version.

Now that we have setup the lottie animation library, we need to find a cool animation to be added in our app. As mentioned above go here and download an animation of your choice. I have chosen the confetti animation. Download it.

Now goto the directory app>>src>>main>>res. Create a new folder inside res and name it raw. Now add the before downloaded animation file(json) inside the raw directory. In my case i have added the confetti.json as shown below



Now go inside your layout file in app>>src>>main>>res>>layout and add the following layout to your layout file to render the download lottie animation

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes="@raw/confetti"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

Now try running the app, you can see animation like shown below

lottie animation using confetti.json


You can see that i have set the property app:lottie_loop="true" which will make the animation run continuously without stopping. You may set it as false if you don't want the animation to run continuously. I have also given a property app:lottie_autoPlay="true" which will make the animation to run automatically. You may set it as false and then play animation programatically like this animationView.playAnimation();

No comments:

Post a Comment