Blog: Shimmer Effect Android

fragment_main.xml

<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"
    app:shimmer_auto_start="false"
    app:shimmer_duration="2000">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/placeholder" />
            <include layout="@layout/placeholder" />
            <include layout="@layout/placeholder" />
            <include layout="@layout/placeholder" />
        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</com.facebook.shimmer.ShimmerFrameLayout>

placeholder.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <View
                android:layout_width="200dp"
                android:layout_height="20dp"
                android:background="@drawable/shimmer_bg"
                tools:text="Title" />

            <View
                android:layout_width="250dp"
                android:layout_height="15dp"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="40dp"
                android:background="@drawable/shimmer_bg" />

        </LinearLayout>

        <View
            android:layout_width="0dp"
            android:layout_height="90dp"
            android:layout_weight="0.3"
            android:layout_marginStart="8dp"
            android:layout_gravity="center"
            android:background="@drawable/shimmer_bg"
            card_view:srcCompat="@mipmap/ic_launcher" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="8dp"
        android:paddingBottom="32dp">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <View
                android:layout_width="180dp"
                android:layout_height="15dp"
                android:background="@drawable/shimmer_bg" />

            <RelativeLayout
                android:layout_marginTop="8dp"
                android:layout_width="wrap_content"
                android:layout_height="15dp">

                <View
                    android:id="@+id/placeholder_date"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:background="@drawable/shimmer_bg"/>

                <View
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_toEndOf="@id/placeholder_date"
                    android:layout_marginStart="8dp"
                    android:background="@drawable/shimmer_bg"/>
            </RelativeLayout>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>