Android Animations Using Lottie
Tags: android, lottie, beginners
Published: 2019-03-06 04:54:48

---
title: Android Animations Using Lottie
published: true
description: 
tags: #android, #lottie, #beginner
cover_image: 
---

#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](https://airbnb.design/lottie/) for Android is a library created by [Airbnb](https://airbnb.design/introducing-lottie/) 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](https://thepracticaldev.s3.amazonaws.com/i/a2pwf45j6sasipq7yn8v.gif)

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](https://dev.to/pabiforbes/devfestza-bringing-your-android-application-to-life-using-animations-part-1-173p)
- [Bringing Your Android Application To Life Using Animations ~ Part 2](https://dev.to/pabiforbes/devfestza-bringing-your-android-application-to-life-using-animations-part-2-3291)

#Quick Tutorial
[Github](https://github.com/PabiMoloi/AnimationsWithLottie/tree/develop)

#Cool Resources:
- [Lottie Files](https://lottiefiles.com/)
- [Fragmented Podcast](https://dev.to/fragmented/082-airbnbs-gabriel-tells-how-to-animate-with-lottie)
- [Lottie ~ Get Started](https://airbnb.io/lottie/android/android.html#getting-started)

#Credits:
- [Fingerprint Animation file]( https://lottiefiles.com/user/7852)