Using Shimmer To Show Progress

We often have to wait for the API call to show the results on the app; during this app screen remains blanks. If API is taking too much time,, the user gets confused and frustrated about working of app. There are various ways to solve this problem as we have to show some progress.

Let's assume we are fetching restaurant data from an API and showing it to the user. Like data in below image

As we start fetching data screen is empty until we get a response from API. We can handle this in various ways lets have a look at some of them:

Using Progress Bar

As you can see below image, a progress bar shows the loading state of data.

Let's see how we can achieve that:

in your XML file, add

<ProgressBar
        android:id="@+id/pb_progress_bar"
        android:layout_width="36dp"
        android:layout_gravity="center"
        android:layout_height="36dp"/>

Now just before making API call

pb_progress_bar.isVisible = true

And after success of API response just call

pb_progress_bar.isVisible = false

Very simple Right😊!

Using Shimmer

From below image you can see how we can make loading state beautiful.

Lets see how we can achieve this:

1. In your build.gradle just add

implementation 'io.supercharge:shimmerlayout:2.1.0'

here 2.1.0 is latest version it may change later.

2. Create XML file like shimmer_loading_layout.xml (you can rename it whatever you want )

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


    <androidx.cardview.widget.CardView
        android:id="@+id/cv_rest"
        android:layout_width="match_parent"
        android:layout_margin="16dp"
        app:cardCornerRadius="16dp"
        android:background="@color/shimmer"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="180dp">

        <View
            android:id="@+id/iv_restaurant"
            android:layout_width="match_parent"
            android:background="@color/shimmer"
            android:layout_height="match_parent"/>

    </androidx.cardview.widget.CardView>

    <View
        android:id="@+id/tv_rest_name"
        android:layout_width="match_parent"
        android:maxLines="1"
        android:ellipsize="end"
        android:background="@color/shimmer"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="8dp"
        android:layout_height="24sp"/>

    <View
        android:layout_width="160dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:background="@color/shimmer"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="8dp"
        android:layout_height="24sp"/>

    <View
        android:layout_width="160dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:background="@color/shimmer"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="8dp"
        android:layout_height="24sp"/>

    <View
        android:layout_width="160dp"
        android:maxLines="1"
        android:ellipsize="end"
        android:background="@color/shimmer"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="8dp"
        android:layout_height="24sp"/>


</LinearLayout>

Here I have used shimmer color which is basically grey color :

<color name="shimmer">#16000000</color>

Here you can customise this layout in your way its just for reference here.

3. Now just add this layout below or above of your recycler view code in XML file.

<LinearLayout  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"
    tools:context=".MainActivity"
    android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<io.supercharge.shimmerlayout.ShimmerLayout
    android:id="@+id/shimmer_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/ll_loading_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include layout="@layout/shimmer_loading_layout" />

        <include layout="@layout/shimmer_loading_layout" />

    </LinearLayout>
</io.supercharge.shimmerlayout.ShimmerLayout>
</LinearLayout>

I have used shimmer_loading_layout 2 times you can do it as many times as you want based on loading view height it does not matters.

4. Now just before making API call you can call below code to get this effect

ll_loading_view.isVisible = true
recyclerview.isVisible = false
shimmer_view.startShimmerAnimation()

5. As soon as you get the result you can remove this effect by adding this code:

ll_loading_view.isVisible = false
recyclerview.isVisible = true
shimmer_view.stopShimmerAnimation()

Simple 😊😊😊

P.S.- If you have any query, please let me know.