ShimmerLayout in Android with Examples

ShimmerLayout can be used to add a Shimmer Effect (like the one on Facebook or LinkedIn) to the Android Application. This layout is mainly used when an app fetched data from API but the task is a long-running task. Therefore it is better to add ShimmerLayout rather than showing the blank screen as it notifies the user that the layout is in the loading state. The code has been given in both Java and Kotlin Programming Language for Android.

Advantages:

• ShimmerLayout is memory efficient.
• It can be customized according to the need of the application.

Disadvantage:

• It is deprecated.

Approach:

1. Add the support library in the App-level build.gradle file and add dependency in the dependencies section. It allows the developer to use the inbuilt function directly. 

dependencies {     
    implementation 'io.supercharge:shimmerlayout:2.1.0'
}

2. Create circle.xml file in the drawable folder and add the following code. This will be used in the ShimmerLayout along with the text view. 

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:height="40dp"
        android:width="40dp"/>
    <corners android:radius="20dp"/>
    <solid android:color="#D3D3D3"/>
</shape>

3. Add the following code in the activity_main.xml file. In this file, add ShimmerLayout and its child view. Add circle.XML in the src tag in ImageView. 

XML

<io.supercharge.shimmerlayout.ShimmerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/shimmer_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shimmer_animation_duration="2000" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:layout_marginStart="10dp"
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp" />

            <TextView
                android:layout_marginEnd="10dp"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="#D3D3D3"
                android:textSize="26sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:layout_marginStart="10dp"
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp" />

            <TextView
                android:layout_marginEnd="10dp"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="#D3D3D3"
                android:textSize="26sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:layout_marginStart="10dp"
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp" />

            <TextView
                android:layout_marginEnd="10dp"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="#D3D3D3"
                android:textSize="26sp" />
        </LinearLayout>

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

4. Add the following code to the MainActivity File. In this file, the startShimmerAnimation method is used to start the animation on ShimmerLayout. 

Java

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import io.supercharge.shimmerlayout.ShimmerLayout;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ShimmerLayout layout = findViewById(R.id.shimmer_layout);
        layout.startShimmerAnimation();
    }
}

Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import io.supercharge.shimmerlayout.ShimmerLayout

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

        val layout: ShimmerLayout = findViewById(R.id.shimmer_layout)
        layout.startShimmerAnimation()
    }
}

Output: