Lottie Animations in an Android App
Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. The top 500 apps on the App store now use Lottie to engage users and enhance conversions.A Lottie is an open-source text and vector-based file format that is easy to ship. Its cross-platform capabilities, tiny file size, and scriptable and interactive nature make it popular with designers and developers. Motion evokes emotion. It humanizes your app or website, adds empathetic experiences that entertain and engage. Lottie is the easiest way to bring motion to your apps and platforms.
Getting Started
Choose your Lottie
Choose the Lottie for your Android app. You may have your own or if you don’t , you can select one from Lottie Files if you can’t find a lottie that matches your Android App , you can create your own with Adobe After Effects but this is actually quite difficult
It’s important to test your selected Lottie using the LottieFiles app for Android to make sure the animation you’ve chosen will play the same Android as sometimes not all animations are built with features supported in the Lottie Android player.
Just scan the QR code under the animation on LottieFiles with the app to preview the animation.
Setup your project
Getting started with Lottie is very straightforward. This guide assumes that you are using Android Studio as your IDE. If you’re using a different IDE, you can still use the same instructions.
Download
dependencies {
def lottieVersion = "3.4.0"
implementation 'com.airbnb.android:lottie:$lottieVersion'
}
Bundling animations with your app
If you need your animations to work offline, you can bundle your animations with your application by including them in your projects raw resources.
If your project does not have one, create it by going to File>New>Folder>Raw Resources Folder. If your animation contains images, you can bundle them all together in a .zip with your .json and follow the same procedure.
Download the animation, rename it to animation.json or animation.zip depending on your use-case, and place into your raw resources folder.
Add LottieAnimationView to your layout
<com.airbnb.lottie.LottieAnimationView
android:layout_marginEnd="20dp"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="@raw/lottieAnimation"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="30dp"
android:layout_height="30dp"/>
Your first Android project with Lottie animations is ready to go!. Now you can build your Android App and you can see your app look pretty good or better than use normal view. You can learn more in The official documentation for lottie-android
That’s how you get started but there’s so much more you can do. For more tips on how to use Lottie with your projects I will mention in next Post