Lottie on Android: Part 1 — The basics

Connie Reinholdsson
Jul 2, 2019 · 3 min read
Image for post
Image for post

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.

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.

Image for post

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 , export it to a .json file using the 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

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

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

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

: Add animation in XML or Activity / Fragment

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.

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? 😄

Image for post
Image for post

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.

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

Image for post
Image for post

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!

Compare the Market

The people behind comparethemarket.com and the Meerkat App

Thanks to Matt Carron, Viktar Maiseyenka, Daniel Wilkie, and Jack Wall

Connie Reinholdsson

Written by

Android Developer at comparethemarket.com . London, UK

Compare the Market

The people behind comparethemarket.com and the Meerkat App

Connie Reinholdsson

Written by

Android Developer at comparethemarket.com . London, UK

Compare the Market

The people behind comparethemarket.com and the Meerkat App

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store