Cool animations with Lottie

In this blog post we will learn about a cool animation library “Lottie”, in the days prior to lottie, building complex animations for Android, iOS and React Native, was a cumbersome task and required a lot of lines of code which was hard to understand and maintain, plus a lot screen dependent assets for each type of screen and then some cool guys at AirBnb created lottie to ease out this task of making cool and amazing animations.

Lottie is a mobile library that works for Android, iOS and Web as well, it’s an Adobe After Effects animation renderer, i.e., it renders the cool animation you construct using Adobe After Effects. For achieving this task you either have to make a cool animation using Adobe After Effects and export that animation as json file using Bodymovin, it is plusing for After Effects that allows you to export animations as json file.

Let’s Get Started With Lottie

In order to begin with lottie library for android we need to do the following things

1. Add lottie as a gradle dependency to our android project in android studio

For this, just go into your app level build.gradle file located at app/build.gradle and add the following lines in dependencies code block.

implementation 'com.airbnb.android:lottie:2.5.5'

2. Make cool animation using Adobe After Effects and export it as json, using Bodymovin, or instead of going through the hassle of “How to make animations in Adobe After Effects” you can go to LottieFiles and browse the showcased animations and select the one you like and download the json file.

Now, you are done with adding the lottie library and selecting the desired animation, now we have to add that json file into android assets folder into the project, if you already have assets folder under app directory, then just copy the json file and paste it in there. But if you don’t have assets folder then you will have to create the folder, by following this chain of sequences app>New>Folder>Assets Folder and click finish, if you got lost somewhere, just follow the below screenshot.

and you will have assets folder created under app directory, verify it with the below screenshot.

once the assets folder is created just add the json file via pasting the file into the folder, and you will have folder structure like below:

now, open the layout file where you wish to add the animation, and add the below code under the root layout or wherever you want to add the animation.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="loading.json"
    app:lottie_loop="true"
    android:layout_centerInParent="true"
    app:lottie_autoPlay="true" />

if you just a sample project, your complete layout file will be like

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="loading.json"
        app:lottie_loop="true"
        android:layout_centerInParent="true"
        app:lottie_autoPlay="true" />
</RelativeLayout>

under LottieAnimationView element, you will see a tag lottie_fileName, it is the name of the file you downloaded and copy pasted into assets folder, next thing is to run the application on mobile device, just click on green play button, choose your device/emulator and you will see the magic happening without writing a single java code, you will have the output like below:

and the loading indicator will be animating like expected.

If you wish to have more control over the animation, you can always hook the LottieAnimationView with it’s corresponding java object and hook it up with the UI using findViewById(“id of view”)and then you can utilize the methods like

setMinFrame(…)

setMinFrame()

setMaxProgress()

setMaxProgress()

setMinAndMaxFrame()

setMinAndMaxProgress()

and you can add animation listeners to track the progress and completion of the animation and do other actions depending upon the condition.

To learn more about lottie visit their docs site at http://airbnb.io/lottie/android/android.html#getting-startedand the github repo at https://github.com/airbnb/lottie-android