app/build.gradle

@@ -69,6 +69,8 @@ dependencies {
     implementation "com.google.android.exoplayer:exoplayer-ui:$exo_version"
     implementation "com.google.android.exoplayer:extension-mediasession:$exo_version"
 
+    implementation 'com.facebook.shimmer:shimmer:0.5.0'
+
     implementation 'com.github.bumptech.glide:glide:4.13.2'
     implementation 'jp.wasabeef:glide-transformations:4.3.0'
 

app/src/main/java/org/mosad/teapod/ui/activity/main/fragments/HomeFragment.kt

@@ -27,12 +27,15 @@ import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.children
+import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.repeatOnLifecycle
 import com.bumptech.glide.Glide
+import com.facebook.shimmer.ShimmerFrameLayout
 import kotlinx.coroutines.launch
 import org.mosad.teapod.R
 import org.mosad.teapod.databinding.FragmentHomeBinding
@@ -161,10 +164,35 @@ class HomeFragment : Fragment() {
         binding.textHighlightInfo.setOnClickListener {
             activity?.showFragment(MediaFragment(uiState.highlightItem.id))
         }
+
+        // disable the shimmer effect and hide the shimmer layouts
+        binding.shimmerLayoutUpNext.apply {
+            stopShimmer()
+            isVisible = false
+        }
+        binding.shimmerLayoutWatchlist.apply {
+            stopShimmer()
+            isVisible = false
+        }
+        binding.shimmerLayoutRecommendations.apply {
+            stopShimmer()
+            isVisible = false
+        }
+        binding.shimmerLayoutNewTitles.apply {
+            stopShimmer()
+            isVisible = false
+        }
+        binding.shimmerLayoutTopTen.apply {
+            stopShimmer()
+            isVisible = false
+        }
     }
 
     private fun bindUiStateLoading() {
-        // currently not used
+        binding.root.children.filter { it is ShimmerFrameLayout }.forEach {
+            it as ShimmerFrameLayout
+            it.startShimmer()
+        }
     }
 
     private fun bindUiStateError(uiState: HomeViewModel.UiState.Error) {

app/src/main/res/layout/fragment_home.xml

@@ -126,6 +126,23 @@
                     android:textSize="16sp"
                     android:textStyle="bold" />
 
+                <com.facebook.shimmer.ShimmerFrameLayout
+                    android:id="@+id/shimmer_layout_up_next"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    tools:visibility="gone">
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="horizontal">
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                    </LinearLayout>
+
+                </com.facebook.shimmer.ShimmerFrameLayout>
+
                 <androidx.recyclerview.widget.RecyclerView
                     android:id="@+id/recycler_up_next"
                     android:layout_width="match_parent"
@@ -154,6 +171,23 @@
                     android:textSize="16sp"
                     android:textStyle="bold" />
 
+                <com.facebook.shimmer.ShimmerFrameLayout
+                    android:id="@+id/shimmer_layout_watchlist"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    tools:visibility="gone">
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="horizontal">
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                    </LinearLayout>
+
+                </com.facebook.shimmer.ShimmerFrameLayout>
+
                 <androidx.recyclerview.widget.RecyclerView
                     android:id="@+id/recycler_watchlist"
                     android:layout_width="match_parent"
@@ -182,6 +216,23 @@
                     android:textSize="16sp"
                     android:textStyle="bold" />
 
+                <com.facebook.shimmer.ShimmerFrameLayout
+                    android:id="@+id/shimmer_layout_recommendations"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    tools:visibility="gone">
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="horizontal">
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                    </LinearLayout>
+
+                </com.facebook.shimmer.ShimmerFrameLayout>
+
                 <androidx.recyclerview.widget.RecyclerView
                     android:id="@+id/recycler_recommendations"
                     android:layout_width="match_parent"
@@ -210,6 +261,23 @@
                     android:textSize="16sp"
                     android:textStyle="bold" />
 
+                <com.facebook.shimmer.ShimmerFrameLayout
+                    android:id="@+id/shimmer_layout_new_titles"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    tools:visibility="gone">
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="horizontal">
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                    </LinearLayout>
+
+                </com.facebook.shimmer.ShimmerFrameLayout>
+
                 <androidx.recyclerview.widget.RecyclerView
                     android:id="@+id/recycler_new_titles"
                     android:layout_width="match_parent"
@@ -238,6 +306,23 @@
                     android:textSize="16sp"
                     android:textStyle="bold" />
 
+                <com.facebook.shimmer.ShimmerFrameLayout
+                    android:id="@+id/shimmer_layout_top_ten"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    tools:visibility="gone">
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="horizontal">
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                        <include layout="@layout/item_media_shimmer" />
+                    </LinearLayout>
+
+                </com.facebook.shimmer.ShimmerFrameLayout>
+
                 <androidx.recyclerview.widget.RecyclerView
                     android:id="@+id/recycler_top_ten"
                     android:layout_width="match_parent"

app/src/main/res/layout/item_media_shimmer.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="195dp"
+    android:layout_height="wrap_content"
+    android:layout_marginStart="4dp"
+    android:layout_marginEnd="3dp"
+    android:backgroundTint="?themeSecondary"
+    android:visibility="visible"
+    app:cardCornerRadius="7dp"
+    app:cardElevation="4dp">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <FrameLayout
+            android:id="@+id/frame_image_progress"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            app:layout_constraintBottom_toTopOf="@+id/text_title"
+            app:layout_constraintDimensionRatio="H,16:9"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <ImageView
+                android:id="@+id/image_poster"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@color/textBackgroundDark"
+                android:contentDescription="@string/media_poster_desc" />
+
+        </FrameLayout>
+
+        <TextView
+            android:id="@+id/text_title"
+            android:layout_width="128dp"
+            android:layout_height="wrap_content"
+            android:layout_margin="11dp"
+            android:background="@color/textBackgroundDark"
+            android:textSize="15sp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/frame_image_progress" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</com.google.android.material.card.MaterialCardView>