How to Create Awesome Loaders on Android



Modern mobile apps carry out asynchronous operations, operations that would require the user to wait while the app is busy. Creating nice interactive loaders that match the purpose of your app will greatly improve the user experience in your app.

.1. First of all, we would need to search for an appropriate animation on https://lottiefiles.com/, there are many free or paid animations available on the site. They also have an amazing blog post detailing some neat loading animations at: https://lottiefiles.com/blog/inspiration/a-loading-spinner-slows-down-time-here-s-what-you-can-use-instead. Once you have selected an appropriate animation, you would have to create an account on the site, edit some of the colors if you would like using the animation editor and then download the animation in json format, and now we can move to the next step

.2. We have to add Lottie to our android project by adding

implementation'com.airbnb.android:lottie:$lottieVersion'

to your app level build.gradle, the latest version is 3.4.0 at the time of this publication, you can always check out the latest version at : https://github.com/airbnb/lottie-android.

3. Next, we have to move the downloaded json file to the res/raw/ resource directory as shown below:

Next we create an XML layout file to hold the LottieAnimationView, I like to use a FrameLayout so i can centralize the AnimationView. You can set a variety of attributes for the LottieAnimationView, like so:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.airbnb.lottie.LottieAnimationView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_repeatMode="reverse"
        app:lottie_rawRes="@raw/dumbell_anim"
        android:layout_gravity="center"
        />

</FrameLayout>

4. Next we have to create a DialogFragment that will handle showing, the loader. I created a LoadingDialogFragment.kt file, which is relatively simple file that displays the animation on a transparent background. Here is it:


import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import androidx.fragment.app.DialogFragment

We can initialize initialize, show or hide the loader using the methods shown below:

//Initialize Loader
private val loadingDialogFragment by lazy { LoadingDialogFragment() }
        
//Show Loader
if (!loadingDialogFragment.isAdded){
            loadingDialogFragment.show(supportFragmentManager, "loader")
        }
        
//Hide Loader 
if (loadingDialogFragment.isAdded) {
            loadingDialogFragment.dismissAllowingStateLoss()
        }

Using MVVM and Livedata, I usually set my loading states from the viewmodel and observe the livedata object in the activity so i am able to use it as shown below:

 viewModel.loading.observe(this, Observer{ loadingState ->
        when(loadingState){
            true -> showLoader()
            false -> hideLoader()
        }
    })

Another example of using the Lottie animations as loaders is shown below:

Leave a Reply

Your email address will not be published. Required fields are marked *