Animations, Differently

I have written two blog posts based on my (first ever) talk about Android Animations. Little did I know that two months after, I would be given a task that would require me to revisit animations. But this time, I had to approach animations differently. How?! you may ask...

Using Lottie

The task was to replace all the progress bars in the Android application, with the custom loaders from the Illustrators in the team. So this time, I would not make use of the View Animation Framework nor the Property Animation Framework.
The Illustrators provided the custom loader animations in the form of a json file. So how do we load json animation files? By using a cool library called Lottie.

Lottie for Android is a library created by Airbnb that aids in rendering animations created using After Effects.

The Setup

Inside your app gradle file in your project add the following dependency:

dependencies {
implementation 'com.airbnb.android:lottie:$lottieVersion'
}

And that is all you need to get started.

Loading Animations

To make use of the Lottie tool, animations need to be placed inside the assets (...\app\src\main\assets) folder inside your project.This is where Lottie loads the animations from.
Once the animations are placed in the folder, we can add them to the layouts.

Adding Lottie Animation Views To Layouts

A Lottie Animation View is used to load a Lottie animation. To add a LottieAnimationView to a layout, we make use of the <com.airbnb.lottie.LottieAnimationView/> tag as follows:

<com.airbnb.lottie.LottieAnimationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="your_filename.json" />

For example, let's say we have a fingerprint animation we want to display while we authenticate the user's fingerprint. We would add it to a layout as follows:

<com.airbnb.lottie.LottieAnimationView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_fileName="fingerprint.json" />

Result:

Fingerprint animation

Animations can help bring your application to life, help provide visual feedback for your users, and make the user interface more appealing and usable. Lottie is an awesome tool that can assist in achieving that. Go ahead and give it a try.

Previous Blogs Posts

• Bringing Your Android Application To Life Using Animations ~ Part 1
• Bringing Your Android Application To Life Using Animations ~ Part 2

Quick Tutorial

Github

Cool Resources:

• Lottie Files
• Fragmented Podcast
• Lottie ~ Get Started

Credits:

• Fingerprint Animation file