Make your Apps Look Better with Lottie Animations

Lottie is a file format for vector graphics and animations, a JSON-based file format to make your applications look better. However, Lottie can be used on multiple platforms but we’ll keep our discussion limited to Android.
Beautiful animations getting played on your device are always a great user experience if all cards are played well.

Lottie animations website provides millions of JSON files which are much lighter than gifs and can be easily integrated with our application.

There are two ways to add Lottie to our applications and we’ll show a basic implementation in both ways.

First, add the Lottie dependency in the build.gradle app/library module.

implementation "com.airbnb.android:lottie:5.2.0"

right click on the version number and android studio will show the latest version available or find the latest version on the Lottie animations website.

Lottie basically runs on its own view which extends the ImageView and its XML layout looks as follows…

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
/>

it has a set of attributes like ….

app:lottie_autoPlay="true"/"false"
app:lottie_loop="true"/"false"

Autoplay will start the animation as soon as it is been displayed on the screen.

the loop will loop the animation again and again until it is dismissed.

now there are two ways you can add Lottie to your LottieAnimationView.

1. By downloading the file and adding it to a raw layout resource file. note the resource type of your folder should be raw.
2. By hosting it as a URL and passing the URL to the XML file

to use it from the asset…

app:lottie_rawRes = "@raw/...."

or to use it from the URL…

app:lottie_url="url...."

okay, enough of the theory let’s build a small application to run Lottie animation on an activity.

I won’t repeat the steps to add dependency and all.

create an empty project in android studio and name it whatever you want, I have named it as LottieTut.

in the activity_main.xml add the LottieAnimationView and give the constraints as shown…

<?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/lottieAnimationView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.494"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
    />
</androidx.constraintlayout.widget.ConstraintLayout>

go to the official website of lottie animations, and download any Lottie file you like.

Click on Lottie JSON.

and add it to a raw resource folder.

do remember to change the name, in small cases with no special characters and numbers.

app:lottie_rawRes="@raw/crick"

add this line to the XML code and the final XML file looks like…

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="50dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.494"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/crick"
    />

run your app and it’s good to go.

programmatically you can also control the Lottie animations using an object of LottieAnimationView.

there are multiple functions to like setAnimationUrl(), playAnimation() and what not.

URL for a Lottie animation you can also get on its website when you click to download any Lottie.

The link to official Documentation is: https://lottiefiles.com/

Happy Coding !!