Lottie on Android: Part 1 — The basics

This series of articles follows as a result of mine and Matt Carron’s talk ‘Three approaches to animations on Android’ at the CodeMobile Developer Conference 2019, where we evaluate three approaches to animations including the Android framework, Video and Airbnb’s Lottie library.

• Lottie on Android: Part 1 — The basics (you’re here)
• Lottie on Android: Part 2 — Animation listeners
• Lottie on Android: Part 3 — Dynamic properties

The Github repository with all the examples from this series can be found here. The Lottie animation used in this tutorial is by LottieFiles and can be found here.

About Lottie

Lottie is an open-source animation tool built by Airbnb (click here for official documentation) and supports JellyBean (API 16) and above on Android.

Lottie works quite differently to the traditional Android framework by allowing the designer to build the animation in After Effects (AE), export it to a .json file using the BodyMovin plugin and the developer can then simply render the animation and manipulate its properties using the Lottie library tools.

If you want to give it go , there are lots of Lottie files available to download here. 👍

Render Lottie on Android

Pre-requisites: Animation exported in .json file (these can be downloaded from www.lottiefiles.com).

Step 1: Add Lottie library to gradle​ (we’re using Lottie for Android v.3.0.0).

Step 2: Add the .json file to assets folder​ in Android Studio, by simply copying and pasting it into the assets folder (app/src/main/assets).

Step 3: Add animation in XML or Activity / Fragment

XML:

Let’s look into some attributes we’ve added:
lottie_fileName=”watch_progress.json” Links it to the .json file. lottie_autoplay="true" Starts the animation.
lottie_loop=”true” Ensures the animation keeps looping.
lottie_speed=”4” Speeds the animation up times four.

Activity / Fragment:

Alternatively, we can add a basic LottieAnimationView to XML and set the attributes in onCreate() / onCreateView().

Time to compile! And here’s the result .. pretty simple, right? 😄

Additional attributes

Let’s see what more we can do with Lottie. There are a number of additional attributes that can be used to manipulate the animation. Below are a couple of examples we found pretty useful:

But what do these actually do? 🕵️‍♀️

android:scaleType=”center Centres animation in view.
lottie_scale="3" Scales it down to a third its size.
lottie_repeatCount=”3” Makes the animation loop three times.
lottie_repeatMode=”reverse” Reverses at the end of the animation.

Tip: LottieAnimationView extends from ImageView, meaning attributes such as scaleType can be added to the view as seen above.

By simply updating the attributes, we’ve scaled it down, it loops three times and reverses at the end. Awesome. 😄

In this article we’ve explored the basics of Lottie including a step-by-step guide to rendering a Lottie animation and changed some of the attributes. To find out more exciting tools to use in Lottie, check out the next blogpost in this series! 👍

Thank you for reading, it would be great to get your feedback!