Facebook Shimmer Animation Example

• Place the below layout anywhere you want a loading effect.
• Needs to remove this layout after the loading is completed.

        <com.facebook.shimmer.ShimmerFrameLayout
            android:id="@+id/shimmer_view_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="vertical">

            <LinearLayout
                android:padding="5dp"
                android:orientation="vertical"
                android:layout_height="wrap_content"
                android:layout_width="match_parent">
                <include layout="@layout/shimmer_placeholder"/>
                <include layout="@layout/shimmer_placeholder"/>
                <include layout="@layout/shimmer_placeholder"/>
                <include layout="@layout/shimmer_placeholder"/>

            </LinearLayout>
    </com.facebook.shimmer.ShimmerFrameLayout>

• Create a layout file named shimmer_placeholder in layouts folder.
• placeholder layout is needed as we have to display multiple rows of loading effect inside shimmer layout.
• We are using inline styling,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="10dp">

    <View
        android:id="@+id/thumbnail"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="10dp"
        android:background="#dddddd" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/thumbnail"
        android:layout_marginTop="10dp"
        android:orientation="vertical">
        <View
            android:layout_width="200dp"
            android:layout_height="15dp"
            android:background="#dddddd" />
        <View
            android:layout_width="60dp"
            android:layout_height="12dp"
            android:layout_marginTop="5dp"
            android:background="#dddddd" />
    </LinearLayout>
</RelativeLayout>

Declare and find shimmer layout (required for stopping animation).

//declare the layout
private ShimmerFrameLayout shimmer_view_container;

//find layout view (preferably inside oncreate)
shimmer_view_container = parentView.findViewById(R.id.shimmer_view_container);

Stop Animation , when data is loaded

//stop animation and remove view
shimmer_view_container.stopShimmer();
shimmer_view_container.setVisibility(View.GONE);