If you thought that animations in Android were tough, I’m about to change your mind. In this tutorial, I’ll show you a super easy way to use complex animations in your android app using lottie animation android.
We’re going to use this android animation library called Lottie. Lottie animation was developed by folks at AirBnb for integrating simple but powerful animations in their apps.
We all know how cumbersome it can be to create animations in android. You’ll need to know about ValueAnimator, ItemAnimator, ObjectAnimator or one of these according to your need.
But lottie makes it really easy. All you need to do is to add the dependency and download a JSON file. Let me show you how it works.
Android Animation Example
For the sake of this tutorial I’m going to create the most complex app in the world. DICE ROLLING!
Here’s what the finished product would look like:
1. Add Lottie Animation dependency to your project
In your project level build.gradle file, add the dependency for Lottie Animation library. Make sure to add the latest version.
implementation 'com.airbnb.android:lottie:3.4.2'
2. Choose an Animation from Lottie Files
The way lottie works is by reading a JSON file which contains all the info about the animation. This JSON file can be obtained from lottiefiles.com. It’s a collection of thousands of cool animations for lottie.
We’re building a dice animation, so go ahead and search for dice in lottiefiles.com. I’m using this one.
https://lottiefiles.com/18184-touzidice6
Download the JSON file and copy it. Move it inside the res/raw folder in our project. If the raw folder isn’t there already, create one.
3. Create LottieAnimationView
Let’s create the layout for our app. It’ll have 3 views:
- Button
- TextView
- LottieAnimationView
Here’s what my layout looks like:
<?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/animationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/tv_roll"
android:layout_centerHorizontal="true"
android:layout_marginBottom="18dp"
android:visibility="gone"
app:lottie_autoPlay="false"
app:lottie_loop="false"
app:lottie_rawRes="@raw/dice_rolling_animation" />
<TextView
android:id="@+id/tv_roll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Click to roll"
android:textColor="#000000"
android:textSize="32sp" />
<Button
android:id="@+id/btn_roll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_roll"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="Click here" />
</RelativeLayout>
Notice that all you need to do to stitch the view and animation together is to provide the name of the file in the view. It’s so simple!
4. Creating the MainActivity.kt file
Now we need to generate numbers between 1-6 randomly and display them. Here’s my MainActivity.kt file:
package com.example.dieroll
import android.animation.Animator
import android.os.Bundle
import android.os.Handler
import android.util.Log
import android.view.View
import android.view.animation.Animation
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView
class MainActivity : AppCompatActivity(), View.OnClickListener, Animator.AnimatorListener {
var btnRoll: Button? = null
var tvRoll: TextView? = null
var animationView: LottieAnimationView? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btnRoll = findViewById(R.id.btn_roll)
tvRoll = findViewById(R.id.tv_roll)
animationView = findViewById(R.id.animationView)
btnRoll?.setOnClickListener(this)
animationView?.addAnimatorListener(this)
}
override fun onClick(v: View?) {
animationView?.visibility = View.VISIBLE
animationView?.playAnimation()
}
override fun onAnimationStart(animation: Animator?) {
}
override fun onAnimationEnd(animation: Animator?) {
val randomNumber = (1..6).random()
tvRoll?.text = randomNumber.toString()
}
override fun onAnimationCancel(animation: Animator?) {
}
override fun onAnimationRepeat(animation: Animator?) {
}
}
I’ve added listeners to the lottie animation view to display the number when dice stops rolling. Generating random numbers in Kotlin is easy with (1..6).random(). Random is an extension function on IntRange data structure.
Watch the Video Tutorial on Desi Coder YouTube Channel in Hindi
The video tutorial for lottie animation is available on the Desi Coder channel on YouTube:
Want to be a better developer ?!
AndroidVille is a community of Mobile Developers where we share knowledge related to Android Development, Flutter Development, React Native Tutorials, Java, Kotlin and much more.
We have a SLACK workspace where we share updates related to new job opportunities, articles on Mobile Development/updates from the industry. We also have channels to help you with any questions, dev-help that you require. Just post a question and people would be ready to help you out 🙂
Click on this link to join the AndroidVille SLACK workspace. It’s absolutely free!
If you like any article, do give it a share on Facebook, Linkedin. You can follow me on LinkedIn, Twitter, Quora, and Medium where I answer questions related to Mobile Development, especially Android and Flutter.
If you want to stay updated with all the latest articles, subscribe to the weekly newsletter by entering your email address in the form on the top right section of this page.