Adding Shimmer Animation to Placeholders

Posted By : Sunidhi Sharma | 31-Oct-2018

android

In Android applications, generally, we use progress bars or spinner loaders as placeholders while loading data from a Network Call. There is yet another way to make the application more interactive. For this we can use “Shimmer” effect as Facebook’s mobile and application. Facebook’s shimmer library adds this effect on any custom-view defined by the user. The first step is to import the dependency in your application’s build.gradle file as shown below:

dependencies {
    ....
    // Add this line to your dependency
    implementation 'com.facebook.shimmer:shimmer:0.1.0@aar'
}

After this rebuild your project. Next step involves adding the layout to your XML application in which you want to add this placeholder. Create a placeholder.xml layout file. This file contains the placeholder layout using just “View”. Make sure to show all the views as the actual item of the list. Below code provides a sample for the same:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_width="match_parent"    
    android:layout_height="wrap_content">
    <View
    android:id="@+id/view1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"    
    android:background="@color/placeholder_background" />
    <View
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:background="@color/placeholder_background" />
    <View
    android:id="@+id/view3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"    
    android:background="@color/placeholder_background" />

</RelativeLayout>

Next step is to make the activity’s layout resource file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    shimmer:duration="800">

    <include layout="@layout/your_placeholder" />
    <!--
        This will include your placeholder
    -->
    </com.facebook.shimmer.ShimmerFrameLayout>

    <android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical" />

</android.support.constraint.ConstraintLayout>

In your activity file start the shimmer animation effect using startShimmerAnimation() method in the activity’s onResume() method and stop it in the activity’s onPause() method.

@BindView(R.id.shimmer_view_container) 
ShimmerFrameLayout shimmerView;

public void onResume() {
    super.onResume();
    shimmerView.startShimmerAnimation();
}

public void onPause() {
    shimmerView.stopShimmerAnimation();
    super.onPause();
}

This is how one can add Shimmer animation to their application. The final step is to hide the shimmerView. When your list gets loaded, set the visibility of shimmer view as GONE and set the visibility of recycler view as VISIBLE, and populate recycler view with the fetched list.