Site icon AndroidVille

Android animation in 4 easy steps with Lottie Animation android

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.

lottie animation android

 

3. Create LottieAnimationView

Let’s create the layout for our app. It’ll have 3 views:

  1. Button
  2. TextView
  3. 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.

Exit mobile version