How to create Placeholder Shimmer Layout for Recycler View using same row which is used in Adapter?

Question

I implemented some examples for Shimmer effect for learning. I don't understand that why people are using separate placeholder layout for while using shimmer effect?

Can't we do change color programmatically and do it for the row which we're used in Adapter class?

See the code for my adapter class row:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?selectableItemBackground"
    app:cardCornerRadius="3dp"
    app:cardElevation="5dp"
    app:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">


        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_toStartOf="@+id/delete"
            android:orientation="vertical">


            <TextView
                android:id="@+id/eventTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:textColor="@color/colorBlack"
                android:textSize="18sp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/eventDes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/eventAttendee"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/eventStart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/eventEnd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/eventLocation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:visibility="gone" />

        </LinearLayout>

        <ImageView
            android:id="@+id/delete"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:clickable="true"
            android:focusable="true"
            android:tint="@color/colorBlack"
            app:srcCompat="@drawable/ic_baseline_delete_24" />


    </RelativeLayout>
</androidx.cardview.widget.CardView>

Can I do that with this layout only? or should I create separate? If separate, can you please tell me how to do that for this above row? Everyone using "view" layout only. I don't understand this.

Answer 1

The reason for declaring a new layout is because you have to wrap your views inside Shimmerlayout and its parent layout will be either frame layout or linear layout. So basically you are restricted in terms of which container to use. Moreover, you are only going to show shimmer animation for a few seconds so using it as a primary ViewGroup is not recommended.

So to create this row just wrap it inside

<?xml version="1.0" encoding="utf-8"?>
<com.facebook.shimmer.ShimmerFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/shimmer_view_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?selectableItemBackground"
        app:cardCornerRadius="3dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp">


            <LinearLayout
                android:id="@+id/linear_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_toStartOf="@+id/delete"
                android:orientation="vertical">


                <TextView
                    android:id="@+id/eventTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_marginStart="12dp"
                    android:textSize="18sp"
                    android:text="your title"
                    android:background="#cecece"
                    android:textColor="#cecece"
                    />

                <TextView
                    android:id="@+id/eventDes"
                    android:layout_width="match_parent"
                    android:layout_height="15dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="8dp"
                    android:text="your sample description goes here"
                    android:background="#cecece"
                    android:textColor="#cecece"
                    />

                <TextView
                    android:id="@+id/eventAttendee"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="8dp"
                    android:text="your eventAttendee"
                    android:background="#cecece"
                    android:textColor="#cecece"
                    />

                <TextView
                    android:id="@+id/eventStart"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="8dp"
                    android:text="your start time"
                    android:background="#cecece"
                    android:textColor="#cecece"
                    />

                <TextView
                    android:id="@+id/eventEnd"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="8dp"
                    android:text="your end time"
                    android:background="#cecece"
                    android:textColor="#cecece"
                    />

                <TextView
                    android:id="@+id/eventLocation"
                    android:layout_width="wrap_content"
                    android:layout_height="15dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="8dp"
                    android:text="your location"
                    android:background="#cecece"
                    android:textColor="#cecece"
                    />

            </LinearLayout>

            <ImageView
                android:id="@+id/delete"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:clickable="true"
                android:focusable="true"
                android:tint="#cecece"
                app:srcCompat="@drawable/ic_delete" />


        </RelativeLayout>
    </androidx.cardview.widget.CardView>

</com.facebook.shimmer.ShimmerFrameLayout>

Now when you have to start it just use - `

ShimmerFrameLayout container =
  (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer();