Add Loading Animation in Android App Using Shimmer

Shimmer is an Android library developed by Facebook to show loading animation while we loading data from API or from LocalDatabase. With the help of this library, we can implement shimmer animation effect to any view in Android.

Implementation of Shimmer library is very easy in your new or existing Android application. Check below simple steps to implement in your project.

 

Implementation Shimmer Android Library

To add shimmer in your project Create a new Android project or Open existing project in Android Studio.

Create a new Android project and after that open your App build.gradle and add library

dependencies {
    /..../
    implementation 'com.facebook.shimmer:shimmer:0.4.0'
}

Once you sync you project you read to add shinner in your project

Add Shimmer in Android Activity or Fragment

Now we can call Shimmer layout in our Activity. Now first we create a layout file which we can include in Shimmer layout. My layout file name loading_view.xml

<?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"
    android:padding="15dp">

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

        <View
            android:layout_width="54dp"
            android:layout_height="54dp"
            android:background="#BAE4E4E4" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:background="#BAE4E4E4"
                android:layout_marginBottom="10dp"></View>

            <View
                android:layout_width="match_parent"
                android:layout_height="14dp"
                android:background="#BAE4E4E4"></View>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Now we need to include loading_view.xml in activity_main.xml as shown below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="#fff"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- Add your Recycler view -->
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/loading_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

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

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

            <include layout="@layout/loading_view"></include>
        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

    <Button
        android:id="@+id/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_gravity="center"
        android:text="Start Loading Animation" />

    <Button
        android:id="@+id/stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Stop Loading Animation" />
</LinearLayout>

If you want to start/stop Shimmer programmatically you can do that by calling startShimmer() / stopShimmer().

public class MainActivity extends AppCompatActivity {

    Button stop, start;
    ShimmerFrameLayout animation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        stop = (Button)findViewById(R.id.stop);
        start = (Button)findViewById(R.id.start);
        animation = (ShimmerFrameLayout)findViewById(R.id.loading_animation);

        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animation.startShimmer();
                start.setVisibility(View.GONE);
                stop.setVisibility(View.VISIBLE);
            }
        });

        stop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animation.stopShimmer();
                stop.setVisibility(View.GONE);
                start.setVisibility(View.VISIBLE);
            }
        });
    }
}

In the above code, I did not implement any RecyclerView or not make any call to Rest API but it was very easy to implement. Add recycler View in your Activity and keep hide once you load and set data in Recycler View then hide Shimmer Layout and Show Recycler View.