In these few steps we will find out how to implement the Skeleton View for the views and the recycler views in Android which is used these days in some of the most famous apps like the loading views in Facebook app.

Adding the dependencies

We will add the following dependencies in our app gradle:

1
2
3
4
dependencies {
       implementation 'com.ethanhua:skeleton:1.1.2'
       implementation 'io.supercharge:shimmerlayout:2.1.0'
    }

Adding the XML views

In our sample we will need 2 views, one is the requested view that could be the one with the RecyclerView and I will leave this for your choice and then we will need to add a new view, e.g. skeleton_item_view.xml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    android:layout_marginBottom="8dp"
    android:background="@android:color/transparent">

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:background="@color/colorLine"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/img_news"
        android:layout_width="90dp"
        android:layout_height="0dp"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:background="@color/light_transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="16dp"
        android:layout_marginRight="50dp"
        android:background="@color/light_transparent"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toRightOf="@+id/img_news"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/img_news" />

    <View
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="14dp"
        android:background="@color/light_transparent"
        android:layout_marginRight="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/tv_title"
        app:layout_constraintTop_toTopOf="@+id/img_news"
        app:layout_constraintBottom_toBottomOf="@+id/img_news"/>

    <View
        android:id="@+id/tv_time"
        android:layout_width="0dp"
        android:layout_height="12dp"
        android:layout_marginRight="50dp"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@color/light_transparent"
        app:layout_constraintBottom_toBottomOf="@+id/img_news"
        app:layout_constraintLeft_toLeftOf="@+id/tv_title"/>

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:background="@color/colorLine"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintLeft_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

The best practice for this view is to add a copy for your view or recyclerview item and then customize every item with the tag android:background="@color/colorLine" and android:background="@color/light_transparent"

Java

Now, we need to initialize the skeleton view with the view or the recyclerview as below:

For RecyclerView:

1
2
3
4
skeletonScreen = Skeleton.bind(recyclerView)
                              .adapter(adapter)
                              .load(R.layout.skeleton_item_view)
                              .show();

For View:

1
2
3
skeletonScreen = Skeleton.bind(rootView)
                              .load(R.layout.skeleton_item_view)
                              .show();

This will cover your view and gives it a time to be loaded, so we need to hide the skeleton view when the view/recyclerview is loaded with this example:

1
2
3
4
5
6
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override    public void run() {
skeletonScreen.hide();    
}
}, 2000); //This will keep the skeleton view 2 seconds and then hide it with hide()