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

Help me to grow our YouTube Channel: 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!!!