How to make placeholder items in Android RecyclerView?

Question

I hope you are well.

How can I show fake/placeholders items when loading the RecyclerView?

I have many applications that use it like the Facebook website and mobile application, and many others like Ebay, MercadoLibre, ...

They put fake elements, with a fade-in animation while loading the content as in this image below:

Answer 1

You can make it using one View class and then set up one background color and finally add one animation of the alpha property.

Step by step:

1. Make one View in your Layout Design and set up your width and height. (layout/activity_main.xml)

    <View
        android:id="@+id/my_view"
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#bbb"/>
   

2. Make one anim file for the alpha animation (anim/placeholder.xml)

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.6" 
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:duration="1000"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
   

3. Go to your activity and start the animation (MainActivity.kt)

   my_view.startAnimation(AnimationUtils.loadAnimation(context, R.anim.placeholder))

You can also make a RecyclerView and pass a list of elements with you design.

Or you can use a class already listed as MockPlaceHolder and your layout would look like this:

<MockPlaceHolder
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutRes="@layout/placeholder_mock_main"
    app:repeact="5"/>

Copy and Paste this class from this gist

For performance, just use one animated view.