What is Lottie?
Developed by Airbnb, Lottie is a library for Android, iOS, Web, and Windows. Lottie is used to adding animations on website or mobile application.
Lottie parses Adobe After Effects animations exported as JSON files through an open-source After Effects extension called Bodymovin and renders them natively on mobile and on the web.
Why is Lottie Preferred to Other Formats?
There are many reasons why designers or developers prefer Lottie animations over other formats like PNG, GIF. The main reason is that the size of a Lottie file compared to PNG or GIF significantly increases download speed and reduces the amount of disk space used.
How to Use Lottie?
Let’s learn how to use Lottie!
Step 1
First go to Lottiefiles.com and select the animation you want to use.
Download the animation of your choice. If you want, you can change properties such as animation speed and background color here.
Step 2
First, open an empty project in your IDE (Here used Android Studio as IDE) and add the required implementation in build.gradle. The latest version of Lottie can be different, you can check it here.
Step 3
Open the raw folder inside the android res folder to keep the lottie files.
To open a raw folder, follow these steps:
- Right click the res folder.
- Choose New.
- Choose Android Resource Directory.
- Name the directory raw.
- In the Resource Types Section add raw.
- Click ok.
Put the previously downloaded animation files inside the raw folder.
Step 4
Add LottieAnimationView to your layout.
LottieAnimationView: The view component used to display Lottie animation.
app: lottie_autoPlay: If this field is correct, the animation screen will run automatically without you having to do anything.
app: lottie_loop: If this field is true, the animation will run over and over again. If false, it will run once and then stop.
app: lottie_rawRes: references the JSON file of the animation.
Step 5
Now is the time to run the application!
To access the finished project on GitHub:
