Animations Using Lottie

Overview:

Welcome visitors greetings of the day, thank you so much for stopping by, hope you are doing well, this blog is related to do animation easily with the help of Lottie library, If you are familiar with android animation and transition then you can understand the pain of implementing it.

What if I say there is a way to implement animation with no pain and by only writing a few lines of code, so sit back and relax there is an exciting topic ahead which will surely help you to find a way to reduce your pain and make your app more beautiful.

So, Let’s get started…

TOPICS:

1. Introduction
2. How Lottie Works?
3. Working With Lottie In Android
4. Is There Any Severe Impact Of Lottie On Apk size!
5. TL;DR

1. Introduction:

Lottie is a very amusing and helpful library which is created by Airbnb, it allows you to run Adobe After Effects animations in the form of JSON file to your Android, IOS, React-Native, and many other cross-platform apps.

Today we are going to build an android app using Lottie animation, In Android, for loading Lottie animation we have LottieAnimationView.

LottieAnimationView extends ImageView, which is the primary component in Android.

Lottie animations are supported from API 16 (JELLY_BEAN) and above in Android.

2. How Lottie Works?

fig. how Lottie works.

The animations have to be developed in Adobe After Effects tool, then the animation is converted into JSON file using the BODYMOVIN plugin in Adobe After Effects, through the help of Lottie library, we can use animation JSON file in Android, IOS, React-Native, and Web.

Lottie parses JSON file and renders natively inside an app, you can either create your animations with Lottie+Bodymovin in Adobe After Effects and export them to JSON file and render it inside your app or just use a pre-made JSON animation files and use it directly in your app without even touching or writing even a single line of animation-related code in Adobe After Effects.

3. Working With Lottie In Android

Implementing animations with Lottie is super easy and can be done in only a few lines of code! Let’s do this…

Prerequisite

Before creating a project we should have JSON file of animation which has been created in Adobe After Effects.

If you know Adobe After Effects you can make JSON file by your own with the help of BODYMOVIN plugin otherwise you can get it from LottieFiles.com.

LottieFiles.com has thousands of free animations which you can download and use in your projects, you can even edit the basic features in animation like colors and size with the built-in BODYMOVIN editor in it.

A gentle reminder to give credit to the original creators if you decide to use any Lottie animations files in your project from LottieFiles.com.

Creating a new project

Create a new project in your Android Studio from File ⇒ New Project and select an empty activity from templates and name it as SplashScreenActivity.kt and act_splash.xml.

Open build.gradle and add Lottie dependencies.

dependencies {
 implementation fileTree(dir: ‘libs’, include: [‘*.jar’])
 implementation ‘com.android.support:appcompat-v7:26.1.0’
 //Lottie Library
 implementation ‘com.airbnb.android:lottie:2.5.0’
}

There are thousands of awesome animations in LottieFlies which you can use it in your project. Now, we’re going to create an assets folder in our project and add two animations file which are pre-made JSON animation files from LottieFlies.

You can download the animation file walking.json file from here.

You can download the animation file cycling.json file from here.

Adding animation in SplashScreenActivity

Add LottieAnimationView in act_splash.xml to load animation.

act_splash.xml
<com.airbnb.lottie.LottieAnimationView
 android:id=”@+id/lav_walking”
 android:layout_width=”wrap_content”
 android:layout_height=”wrap_content”
 android:layout_below=”@+id/iv_splsh_logo”
 android:layout_centerHorizontal=”true”
 app:lottie_autoPlay=”true”
 app:lottie_fileName=”walking.json”
 app:lottie_loop=”true” />

Try to run the project, it will load the walking.json animation in your app without even touching your Kotlin file.

app:lottie_fileName=”walking.json” will tell the view to load the walking.json file which is stored in the asset folder in the resource directory.

app:lottie_autoPlay=”true” will tell the view to automatically start animation when view loaded.

app:lottie_loop=”true” will tell the view to repeat the animation when the animation ends in a loop.

Add below code to SplashActivity.kt, it will complete the SplashActivity and will redirect to MainActivity.kt.

SplashActivity.kt

import android.content.Intent
import android.os.Bundle
import android.os.CountDownTimer
import android.support.v7.app.AppCompatActivity
import lottieanimationdemos.R
class SplashActivity : AppCompatActivity() {
 private var splashTimer: CountDownTimer? = null
 private val minute = 5L
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.act_splash)
 }
 override fun onResume() {
 super.onResume()
 splashTimer = object : CountDownTimer(minute * 1000, 1000) {
 override fun onTick(millisUntilFinished: Long) {}
 override fun onFinish() {
 val mainIntent = Intent(applicationContext, MainActivity::class.java)
 startActivity(mainIntent)
 overridePendingTransition(R.anim.enter_from_right, R.anim.exit_to_left)
 finish()
 }
 }.start()
 }
 override fun onStop() {
 super.onStop()
 cancelTimer()
 }
 private fun cancelTimer() {
 if (splashTimer != null)
 splashTimer!!.cancel()
 }
}

Loading animation programmatically

Create a new activity with name MainActivity.kt and act_main.xml

act_main.xml
<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
 xmlns:tools=”http://schemas.android.com/tools"
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”
 android:background=”@android:color/white”>

 <TextView
 android:id=”@+id/btn_start_stop”
 android:layout_width=”match_parent”
 android:layout_height=”wrap_content”
 android:layout_margin=”10dp”
 android:background=”@android:color/black”
 android:elevation=”10dp”
 android:text=”@string/start_cycling”
 android:textAlignment=”center”
 android:textColor=”@android:color/white”
 android:textSize=”14sp” />
 <com.airbnb.lottie.LottieAnimationView
 android:id=”@+id/lottie_checkedanimation”
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”
 android:layout_below=”@+id/btn_start_stop”
 android:layout_centerHorizontal=”true” />
</RelativeLayout>

Below is the MainActivity.kt file with the logic of load animation and play pause animation on click of LottieAnimationView.

MainActivity.kt
import android.support.v7.app.AppCompatActivity
import android.widget.Toast
import kotlinx.android.synthetic.main.act_main.*
import lottieanimationdemos.R
class MainActivity : AppCompatActivity() {
 private var doubleBackToExitPressedTwice: Boolean = false
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.act_main)
 initLottieAnimation()
 clickListeners()
 }
 
 private fun initLottieAnimation() {
 lottie_checkedanimation.setAnimation(“cycling.json”)
 lottie_checkedanimation.loop(true)
 }
 private fun clickListeners() {
 lottie_checkedanimation!!.setOnClickListener { startCheckAnimation() }
 }
 private fun startCheckAnimation() {
 if (lottie_checkedanimation!!.isAnimating) {
 lottie_checkedanimation!!.pauseAnimation()
 } else {
 lottie_checkedanimation!!.playAnimation()
 }
 }
 override fun onBackPressed() {
 if (doubleBackToExitPressedTwice) {
 finish()
 return
 }
 this.doubleBackToExitPressedTwice = true
 Toast.makeText(this, “Please click BACK again to exit”, Toast.LENGTH_SHORT).show()
 Handler().postDelayed({ doubleBackToExitPressedTwice = false }, 2000)
 }
}

lottie_checkedanimation.setAnimation(“cycling.json”) will set animation programmatically.

lottie_checkedanimation.loop(true) will set animation in repeat mode.

lottie_checkedanimation!!.pauseAnimation() will pause the animation.
lottie_checkedanimation!!.playAnimation() will play the animation.

Congratulations, you have implemented Lottie Animation in your android project.

This was a basic demo for loading Lottie Animation. There are many things in deep which you can find out in their official website as well as there is a sample app in Play Store that you can download from it from here.

4. Is There Any Severe Impact Of Lottie On Apk size!

It is tiny with 800 methods and 111kb uncompressed.

It will occupy 45kb gzipped in our application when it is downloaded from play store.

Considering the above size you can conclude that it is reliable to use it in our app.

5. TL;DR

We have learned about what is Lottie animation and how it works!

We have created a demo application with walking animation in Splash screen and cycling animation with a play-pause feature in the Main screen.

We have seen the impact of Lottie Library in our Apk size.

Download Code