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:
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
Oldest comments (1)
Awesome, thank you!
I used Lottie for the first time just before Christmas. I was developing my application in Xamarin for iOS and Android. I was amazed at the simplicity of implementation; I had previously spent the best part of a day trying to important animations frame-by-frame - yuck! Ended up scrapping it, and only stumbled across Lottie later by chance.
This is such a useful post, I'm not an app developer by any stretch, but Lottie was definitely the easiest way to incorporate nice splash animations to applications that I came across in my brief dabble - I wish I had come across it earlier than I did.