androidkotlinandroid-cardviewandroid-glideshimmer
shimmer showing black edges in card View when declaring it programmatically in android
First of all, this is my item layout for recycler view
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="@font/roboto_medium"
android:maxLines="3"
android:text="dddddddddddddddddddddddddddddddddddddd"
android:textColor="@color/tab_text_color"
android:textSize="@dimen/_14ssp"
app:layout_constraintEnd_toEndOf="@+id/cardView17"
app:layout_constraintStart_toStartOf="@+id/cardView17"
app:layout_constraintTop_toBottomOf="@+id/cardView17" />
<androidx.cardview.widget.CardView
android:id="@+id/cardView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
app:cardCornerRadius="@dimen/_6sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/thumbnail"
android:layout_width="@dimen/_120sdp"
android:layout_height="@dimen/_180sdp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/edit_bg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
And this is how I'm adding shimmer effect to it
val shimmer = Shimmer.AlphaHighlightBuilder()// The attributes for a ShimmerDrawable is set by this builder
.setDuration(2000) // how long the shimmering animation takes to do one full sweep
.setBaseAlpha(0.9f) //the alpha of the underlying children
.setHighlightAlpha(0.93f) // the shimmer alpha amount
.setWidthRatio(1.5F)
.setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
.setAutoStart(true)
.build()
val shimmerDrawable = ShimmerDrawable().apply {
setShimmer(shimmer)
}
Glide
.with(context)
.load(data.thumbnail)
.placeholder(shimmerDrawable)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.centerCrop()
.into(binding.thumbnail)
And this the result which im getting
Yes the shimmer effect is working fine and also the images get loaded when they are downloaded but during the shimmer effect I get these weird back edges, I tried to change the background color of some view in the above-mentioned layout but nothing is working, and If I remove the shimmer effect and placeholder then there are no edges and obviously no shimmer also
Solution
To avoid these black edges you can wrap the whole CardView inside a com.facebook.shimmer.ShimmerFrameLayout like below:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="@font/roboto_medium"
android:maxLines="3"
android:text="dddddddddddddddddddddddddddddddddddddd"
android:textColor="@color/tab_text_color"
android:textSize="@dimen/_14ssp"
app:layout_constraintEnd_toEndOf="@+id/shimmerFrameLayout"
app:layout_constraintStart_toStartOf="@+id/shimmerFrameLayout"
app:layout_constraintTop_toBottomOf="@+id/shimmerFrameLayout" />
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmerFrameLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:shimmer_base_alpha="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="@+id/cardView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
app:cardCornerRadius="@dimen/_6sdp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/thumbnail"
android:layout_width="@dimen/_120sdp"
android:layout_height="@dimen/_180sdp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/edit_bg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</com.facebook.shimmer.ShimmerFrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
and you can use a Shimmer.ColorHighlightBuilder() with a custom BaseColor and HighlightColor like below:
val shimmer = Shimmer.ColorHighlightBuilder()
.setDuration(2000)
.setBaseAlpha(0.9f)
.setHighlightAlpha(0.93f)
.setWidthRatio(1.5f)
.setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
.setAutoStart(true)
.setBaseColor(ContextCompat.getColor(itemView.context, android.R.color.darker_gray))
.setHighlightColor(ContextCompat.getColor(itemView.context, android.R.color.white))
.build()
Results before and after:
