August 10, 2020

How to use a Lottie animation progress bar in android?

By Mohit Agrawal

The concept of Lottie animation progress bar and async task in android

Overview

android lottie progress bar 1

Whenever any application does a task which takes a good amount of time to complete then we always see a progress bar. It tells the completion status.

The above image shows the default progress bar given in the android. Now the question is Can we use a custom progress bar?

In this tutorial, we will learn how to create an async task and use a custom progress bar to show its completion status. I will show you how you can use the Lottie animation progress bar in your android app.

Introduction

In my previous Lottie tutorial, I have shown you how to implement a basic Lottie animation. In today’s tutorial let’s learn some advanced ways of using Lottie.

What we will build?

Before starting the main content, you must see that what this tutorial is all about.

This android tutorial demonstrates the use of Lottie animation as a custom progress bar.

android lottie progress bar 2

Implementation

I assume you already know how to implement the Lottie JSON file in the android project. If not please check out this tutorial first.

1. Choose Lottie file

We need a Lottie JSON file which shows the progress bar. Check out this large collection and download anyone for your project.

The one which I am using is: https://lottiefiles.com/7679-sending-success.

Now import the Lottie file in your android project and keep it ready for the next step.

2. Design simple XML

Create a simple UI for animation. I have made it as simple as possible.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_rawRes="@raw/success" />


</androidx.constraintlayout.widget.ConstraintLayout>

You need to give an id to your animation view like this android:id="@+id/animationView".

3. Create an ASYNC task

Here our aim to create an ASYNC task that will run in the background. We will implement a Lottie animation progress bar to show the completion status.

MainActivity.kt

import android.os.AsyncTask
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*
import java.lang.ref.WeakReference

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        animationView.progress = 0.0f

        val task = MyAsyncTask(this)
        task.execute()
    }
}
// Create inner class by extending the AsyncTask
class MyAsyncTask internal constructor(context: MainActivity) : AsyncTask<String, Int, Int>(){

    private val activityReference: WeakReference<MainActivity> = WeakReference(context)
    //Override the doInBackground method
    override fun doInBackground(vararg params: String?): Int {
        val count = 100
        var index=0
        while (index<count){
            // Publish the progress
            publishProgress(index+1)
            //Sleeping for 1/10 seconds
            Thread.sleep(100)
            index++
        }
        return count;
    }

    // Override the onProgressUpdate method to post the update on main thread
    override fun onProgressUpdate(vararg values: Int?) {
        super.onProgressUpdate(*values)
        
        if(values[0]!=null) {
            val activity = activityReference.get()
            if (activity == null || activity.isFinishing) return
            activity.animationView.progress = (values[0] as Int).toFloat() / 100
            activity.animationView.setMaxFrame(values[0] as Int)
        }
    }

    // Setup the intial UI before execution of the background task
    override fun onPreExecute() {
        super.onPreExecute()
        
        val activity = activityReference.get()
        if (activity == null || activity.isFinishing) return
        activity.animationView.progress = 0.0f
        Log.d("Kotlin","On PreExecute Method")
    }

    // Update the final status by overriding the OnPostExecute method.
    override fun onPostExecute(result: Int?) {
        super.onPostExecute(result)
        Log.d("Kotlin","On Post Execute Method")
    }

}

As you can see in above code, I am creating a new class MyAsyncTask(). Any ASYNC class contains these four methods.

  • doInBackground(): This function gets called when the async task is executing in the background.
  • onPreExecute(): It can be used to set up the initial UI before the execution of the background task.
  • onPostExecute(): This is used to execute the task just after the completion of the background task.
  • onProgressUpdate(): It is used to know the completion status of the background task

Lottie provides a property to set the animation progress. Using this I am setting the progress amount in the method onProgressUpdate() every time.

activity.animationView.progress = (values[0] as Int).toFloat() / 100

Now Copy the code for the MainActivity.kt and run your project. If you have followed everything till here then you should be able to run your Lottie animation progress bar.

DEMO

Conclusion

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!