shimmer showing black edges in card View when declaring it programmatically in android

Question

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

Answer 1

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: