Add shimmer loading effect

fakeyatogod · Sep 3, 2023 · 6fb8e18 · 6fb8e18
1 parent 6de5478
commit 6fb8e18
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 42 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -106,6 +106,9 @@ dependencies {
     implementation "com.google.dagger:hilt-android:2.44.2"
     kapt "com.google.dagger:hilt-compiler:2.44.2"
 
+    // Shimmer
+    implementation 'com.facebook.shimmer:shimmer:0.5.0'
+
     // Test
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'

diff --git a/app/src/main/java/com/talent/animescrap/ui/fragments/AnimeFragment.kt b/app/src/main/java/com/talent/animescrap/ui/fragments/AnimeFragment.kt
@@ -22,6 +22,8 @@ import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
 import androidx.preference.PreferenceManager
 import coil.load
+import com.facebook.shimmer.Shimmer
+import com.facebook.shimmer.ShimmerDrawable
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import com.talent.animescrap.R
@@ -58,6 +60,14 @@ class AnimeFragment : Fragment() {
     private lateinit var epList: MutableList<String>
     private lateinit var epType: String
     private lateinit var epIndex: String
+    private val shimmer =
+        Shimmer.AlphaHighlightBuilder()// The attributes for a ShimmerDrawable is set by this builder
+            .setDuration(1200) // how long the shimmering animation takes to do one full sweep
+            .setBaseAlpha(0.6f) //the alpha of the underlying children
+            .setHighlightAlpha(0.9f) // the shimmer alpha amount
+            .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
+            .setAutoStart(true)
+            .build()
 
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
@@ -129,10 +139,16 @@ class AnimeFragment : Fragment() {
 
                 // load background image.
                 binding.backgroundImage.load(animeDetails.animeCover) {
+                    placeholder(ShimmerDrawable().apply {
+                        setShimmer(shimmer)
+                    })
                     error(R.drawable.ic_broken_image)
                 }
                 // load cover image.
                 binding.coverAnime.load(animeDetails.animeCover) {
+                    placeholder(ShimmerDrawable().apply {
+                        setShimmer(shimmer)
+                    })
                     error(R.drawable.ic_broken_image)
                 }
                 binding.errorCard?.visibility = View.GONE

diff --git a/app/src/main/java/com/talent/animescrap/viewbindings/Bindings.kt b/app/src/main/java/com/talent/animescrap/viewbindings/Bindings.kt
@@ -5,22 +5,27 @@ import android.widget.ImageView
 import android.widget.ProgressBar
 import androidx.databinding.BindingAdapter
 import coil.load
+import com.facebook.shimmer.Shimmer
+import com.facebook.shimmer.ShimmerDrawable
 import com.talent.animescrap.R
 
-
+private val shimmer =
+    Shimmer.AlphaHighlightBuilder()// The attributes for a ShimmerDrawable is set by this builder
+        .setDuration(1200) // how long the shimmering animation takes to do one full sweep
+        .setBaseAlpha(0.6f) //the alpha of the underlying children
+        .setHighlightAlpha(0.9f) // the shimmer alpha amount
+        .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
+        .setAutoStart(true)
+        .build()
 /* A function that is called when the `image` attribute is used in the layout. */
-@BindingAdapter("image", "loaderId")
-fun ImageView.setImage(url: String?, progressBar: ProgressBar) {
+@BindingAdapter("image")
+fun ImageView.setImage(url: String?) {
     if (!url.isNullOrEmpty())
         load(url) {
+            placeholder(ShimmerDrawable().apply {
+                setShimmer(shimmer)
+            })
             error(R.drawable.ic_broken_image)
-            listener(
-                onSuccess = { _, _ ->
-                    progressBar.visibility = View.GONE
-                }, onError = { _, _ ->
-                    progressBar.visibility = View.GONE
-                }
-            )
             build()
         }
 }
diff --git a/app/src/main/res/layout-land-television/fragment_anime.xml b/app/src/main/res/layout-land-television/fragment_anime.xml
@@ -30,6 +30,7 @@
                     android:layout_height="300dp"
                     android:adjustViewBounds="true"
                     android:scaleType="centerCrop"
+                    android:background="@color/shimmerColor"
                     tools:ignore="ContentDescription" />
 
                 <View
@@ -55,7 +56,7 @@
                             android:id="@+id/coverAnime"
                             android:layout_width="match_parent"
                             android:layout_height="match_parent"
-                            android:background="@color/white"
+                            android:background="@color/shimmerColor"
                             android:contentDescription="@string/cover_of_anime"
                             android:scaleType="centerCrop"
                             android:transitionName="pageImageT" />

diff --git a/app/src/main/res/layout-land/fragment_anime.xml b/app/src/main/res/layout-land/fragment_anime.xml
@@ -30,6 +30,7 @@
                     android:layout_height="60dp"
                     android:adjustViewBounds="true"
                     android:scaleType="centerCrop"
+                    android:background="@color/shimmerColor"
                     tools:ignore="ContentDescription" />
 
                 <View
@@ -55,7 +56,7 @@
                             android:id="@+id/coverAnime"
                             android:layout_width="match_parent"
                             android:layout_height="match_parent"
-                            android:background="@color/white"
+                            android:background="@color/shimmerColor"
                             android:contentDescription="@string/cover_of_anime"
                             android:scaleType="centerCrop"
                             android:transitionName="pageImageT" />

diff --git a/app/src/main/res/layout-land/portrait_cover_cardview_item.xml b/app/src/main/res/layout-land/portrait_cover_cardview_item.xml
@@ -46,21 +46,12 @@
                     <ImageView
                         android:id="@+id/imageView"
                         image="@{animeInfo.animeImageURL}"
-                        loaderId="@{progressInCard}"
                         android:layout_width="match_parent"
                         android:layout_height="match_parent"
+                        android:background="@color/shimmerColor"
                         android:contentDescription="@string/imageview_in_main"
                         android:scaleType="centerCrop" />
 
-                    <com.google.android.material.progressindicator.CircularProgressIndicator
-                        android:id="@+id/progressInCard"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerInParent="true"
-                        android:indeterminate="true"
-                        app:indicatorSize="40dp"
-                        app:trackThickness="20dp" />
-
                 </RelativeLayout>
 
             </com.google.android.material.card.MaterialCardView>

diff --git a/app/src/main/res/layout/fragment_anime.xml b/app/src/main/res/layout/fragment_anime.xml
@@ -29,6 +29,7 @@
                     android:layout_width="match_parent"
                     android:layout_height="180dp"
                     android:adjustViewBounds="true"
+                    android:background="@color/shimmerColor"
                     android:scaleType="centerCrop"
                     tools:ignore="ContentDescription" />
 
@@ -55,7 +56,7 @@
                             android:id="@+id/coverAnime"
                             android:layout_width="match_parent"
                             android:layout_height="match_parent"
-                            android:background="@color/white"
+                            android:background="@color/shimmerColor"
                             android:contentDescription="@string/cover_of_anime"
                             android:scaleType="centerCrop"
                             android:transitionName="pageImageT" />

diff --git a/app/src/main/res/layout/landscape_cover_cardview_item.xml b/app/src/main/res/layout/landscape_cover_cardview_item.xml
@@ -46,21 +46,12 @@
                     <ImageView
                         android:id="@+id/imageView"
                         image="@{animeInfo.animeImageURL}"
-                        loaderId="@{progressInCard}"
                         android:layout_width="match_parent"
                         android:layout_height="match_parent"
+                        android:background="@color/shimmerColor"
                         android:contentDescription="@string/imageview_in_main"
                         android:scaleType="centerCrop" />
 
-                    <com.google.android.material.progressindicator.CircularProgressIndicator
-                        android:id="@+id/progressInCard"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerInParent="true"
-                        android:indeterminate="true"
-                        app:indicatorSize="40dp"
-                        app:trackThickness="20dp" />
-
                 </RelativeLayout>
 
             </com.google.android.material.card.MaterialCardView>

diff --git a/app/src/main/res/layout/portrait_cover_cardview_item.xml b/app/src/main/res/layout/portrait_cover_cardview_item.xml
@@ -46,20 +46,12 @@
                     <ImageView
                         android:id="@+id/imageView"
                         image="@{animeInfo.animeImageURL}"
-                        loaderId="@{progressInCard}"
                         android:layout_width="match_parent"
                         android:layout_height="match_parent"
+                        android:background="@color/shimmerColor"
                         android:contentDescription="@string/imageview_in_main"
                         android:scaleType="centerCrop" />
 
-                    <com.google.android.material.progressindicator.CircularProgressIndicator
-                        android:id="@+id/progressInCard"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerInParent="true"
-                        android:indeterminate="true"
-                        app:indicatorSize="40dp"
-                        app:trackThickness="20dp" />
 
                 </RelativeLayout>
 

diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="shimmerColor">#5C5050</color>
+</resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -8,6 +8,7 @@
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
     <color name="bg_color">#FFFFFFFF</color>
+    <color name="shimmerColor">#FFFFFFFF</color>
 
     <!--    MD 3-->