List View/Recycler View Pre Loading Animation

Question

I want to make a loading animation like the screenshot attached. I am unable to find it on the web, or may be I am searching wrong keywords.

Anyone can please help me ?

The lines in a list item, shows as moving. I am giving the screenshot of Flipkart App - My Orders Section

Answer 1

The view effect in the screenshot is called Shimmer Effect.

There are a lot of good examples and open-source libraries available that provide a shimmer effect.

1. Facebook Shimmer This library provided a skeleton layout that can be used with any layout.
2. Shimmer RecyclerView This library specifically provides shimmer effect in RecyclerView

You can also look at various tutorials available which can help you implement this behavior.

1. https://www.androidhive.info/2018/01/android-content-placeholder-animation-like-facebook-using-shimmer/
2. https://codinginfinite.com/facebook-shimmer-effect-android-example/

By following the first tutorial you will be able to achieve: Video

Answer 2

you need to use Shimmer for Android library and make a loading-layout like this

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" android:tag="layout/component_loading_0" xmlns:android="http://schemas.android.com/apk/res/android">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="@drawable/divider_drawable"
            android:orientation="vertical"
            android:showDividers="middle" android:tag="binding_1">

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

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

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

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

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

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

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

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

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

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

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

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