August 6, 2020

How to use Lottie animation in android

By Mohit Agrawal

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.

lottie in android 6
Lottie animation in android

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.

lottie in android 1
res directory –> Click on New –> Android Resource Directory

Now select resource type as raw and click on OK.

lottie in android 2

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.

lottie in android 3
Lottie file under raw directory

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

  1. 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

  2. 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.

  3. 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!!!