How to use Lottie animation in android
Working with Lottie animation in android
In one of my recent iOS tutorial, I have shown you how to use Lottie files in iOS app. Today we will see Lottie animation in the android app.
Introduction
We will develop a simple android app to demonstrate the implementation of Lottie animation. Before starting the main part lets see what is Lottie?
What is Lottie?
Lottie is a tool that generates the JSON based animation file which can be easily imported to iOS, android, flutter, and web apps without any pixel distortion. You can read more about it here.
Lottie is not only for android. It also supports iOS, flutter, react, web any many more.
What we will build?
The main agenda of this article to show the usage of Lottie animation in android. So let’s build a very simple android app with just a single activity class (MainActivity.kt).
The final app will look like this.

Implementation
1. Download the Lottie animation file
There are thousands of free Lottie animation files are available here. You can choose anyone and download it. I am using the “jetpack” animation.
2. Create new project
Create a new empty view android project and name it “Lottie App”. You can also use an existing android project if you want.
3. Add Lottie gradle
Open your app-level Gradle and add Lottie. You can always check the latest version here.
implementation "com.airbnb.android:lottie:3.4.1"
Do not forget to sync your project after adding the Lottie gradle.
4. Create raw directory
If you don’t have a raw folder under your res directory then you need to create one. Right-click on res directory –> Click on New –> Android Resource Directory.

Now select resource type as raw and click on OK.

5. Importing Lottie JSON file
Since you have created the raw directory, so drag and drop the animation file on it. It will look something like this.

6. Making simple UI
Open the activity_main.xml
and add the below code for the Lottie animation view.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="@raw/jetpackgirl" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have placed the Lottie animation view at the center of the main view. Now here app:lottie_rawRes="@raw/jetpackgirl"
you have to pass your animation file name.
7. Let’s conclude
Now run your code and see the beautiful animation 😍 . If you are not getting it then please let me know the issue in the comment section.
This is is just an introductory basic tutorial on Lottie animation. Check out How to use Lottie animation as a custom progress bar?
DEMO
Frequently asked questions on Lottie animation
- What is Lottie JSON file?
Lottie is one of the widely used library for animations. It supports android, iOS, web, flutter, and many more platforms. The animations can be exported as JSON file and can be used on any platform using Lottie library
- Can I use same Lottie JSON file in android and iOS?
Yes, the same Lottie files support many platforms like iOS, android, flutter, web, react, and many more.
But sometimes I have noticed that iOS does not support all types of animations yet. So you may see that your animation is working on android but not showing the same behavior in iOS.
You can always check your animation on the Lottie iOS app. - Animations are coming different in iOS and android with same Lottie JSON file
Sometimes I have noticed that iOS does not support all types of animations yet. So you may see that your animation is working on android but not showing the same behavior in iOS.
You can always check your animation on the Lottie iOS app.
Subscribe YouTube: More tutorials like this
I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!