Creating beautiful and appealing UX is always challenging in mobile applications. We know pictures can speak a thousand words and then animation is surely level above. Creating beautiful but complex animations have always been a challenge in development. This process of creating complex animations has been extremely simplified by a library named ‘Lottie’.
‘Lottie’ is a library from Adobe After Effects, which parses animations exported by After Effects as json with Bodymovin and natively renders them on mobile and also on the web. No extra engineering effort is required on the dev side. Lottie library is available on Android, iOS, React Native, Flutter, ReactJS, Web, Xamarin, NativeScript, Windows, Vue etc but in this blog we will stick to android implementation only. Let’s straight dive into the process and see how it works.
1: Find the animation JSON file:
First thing for making beautiful animations is the requirement of a JSON file of animation you need to display. If you are a designer or working with one you can ask him for an Adobe animation JSON file, exported with Bodymovin or if you are working independently you can always go to Lottie website, which is also a marketplace for Lottie animations which have tons of animations(free & paid). Once you’ve found your desired animation, all you need to do is download that .json file and put it into the “res/raw” folder of your project. I am using this animation for demo purposes from lottie website.
2: Adding Lottie Dependency
Add Lottie dependency to your app’s build.gradle file and sync the changes.
Insert the latest version available instead of ‘lottieVersion’
implementation 'com.airbnb.android:lottie:$lottieVersion'
3: Adding LottieAnimationView to your layout file
Just add the LotieAnimationView in your layout XML like any other element.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/staySafe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="@raw/stay_safe" />
</RelativeLayout>4: That’s it
You can hit the run button and see this animation.
Developing such stuff with android libraries can be an enormous challenge for developers and can take a few days or even weeks, but Lottie makes it a very easy process. You can also control the animation from java/kotlin which gives you more control. I hope this article has been simple and straightforward enough for you to understand and implement Lottie in your project. Thanks for reading and stay safe !