Lottie Library (Add Animations in Android App using Lottie)

If you're curious to add animations in the android app, then new Lottie library will prove so effective for you.

Lottie Library

Lottie is a mobile library that renders After Effects animations natively on Android and iOS, Web and ReactNative. It adds high-quality animation to any native app.

In this tutorial, we will create animation for Android App using Android Studio.You can follow the complete video tutorial on YouTube.

This tutorial walks through different steps. Step 1,2 gives insight information to install bodymovin extension in Adobe After Effects, whereas Step 3 involves working on Android Studio. Here's what we will be making:

Step 01:

• Install Bodymovin(extension)
• Download the ZIP(Bodymovin) from the GitHub repository here.

• Extract the ZIP file(i.e. bodymovin-master.zip)
• Open the extracted folder and navigate to this path (bodymovin-master/build/extension/bodymovin.zxp)
• Copy the file (bodymovin.zxp) over to your desktop.

Step 02:

• Download ZXP installer from aescripts.com. Download here.

•  Install it.

• Open ZXP Installer.app and drag the file (bodymovin.zxp) into it.
• Steps are as follows:

• This is the extension installation process in Adobe After Effects, this extension i.e bodymovin will be used to export the animation in JSON data format file. This JSON file will be used in Android Studio.
• Open After Effects and make sure the extension has been installed. 
• Make a small animation using After Effects
• Export the animation using Bodymovin in JSON.
• Above steps are shown in the video. Here
• However, you can download animation files for free from here. And just add them in your Android Studio project. Save your time!

Step 03:

• Create a new project in Android Studio.
• Create a folder named assets in app/src/main

• Drag your  JSON file into assets folder

• Open the file called build.gradle (Module: app) and add this line just before the last closing bracket: 

  compile 'com.airbnb.android:lottie:2.1.2'

• Replace all of the code of  activity_main.xml with:

code

<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="match_parent" android:layout_height="match_parent" app:lottie_fileName="circle.json" // put your file name here app:lottie_loop="true" app:lottie_autoPlay="true" /> </RelativeLayout

Now, run the app and see the animation!

Source Code

The complete source for Lottie Library is available here.

Need help?

If you got stuck anywhere, do share your comments or contact me directly at yumnaasim11@gmail.com . Share this tutorial with your friends and share your feedback. Stay blessed pals!