How to use a view (shimmer) as a placeholder for an imageView (Glide)

Question

I am using Glide to load images to my imageView (which are inside a recyclerview):

Glide.with(image.context).load(url)
        .error(context.getDrawable(R.drawable.placeholder))
        .into(image)

I see that the Glide library also has a "placeholder" function which gives the ability to load a Drawable to be shown when the image is still being loaded.

On the other hand, for the whole recyclerView, I am using the Facebook Shimmer library to show that the recyclerview is being loaded.

Looking at my app, everything works fine. However, still there is a gap time between when the Shimmer is dismissed (data is fetched) and the image is shown. This is exactly when Placeholder is needed. I am wondering, is there any way to use the Shimmer as Placeholder for the imageView as well? The Placeholder feature in Glide only supports Drawable and the Shimmer is a View.

Is there any way to convert Shimmer to Drawable? or GIF? Or any other suggestion?

Answer 1

Thanks to Mike's comment above: There is a ShimmerDrawable class where you can build a shimmer view as a drawbale which can be used in Glide:

private val shimmer = Shimmer.AlphaHighlightBuilder()// The attributes for a ShimmerDrawable is set by this builder
    .setDuration(1800) // how long the shimmering animation takes to do one full sweep
    .setBaseAlpha(0.7f) //the alpha of the underlying children
    .setHighlightAlpha(0.6f) // the shimmer alpha amount
    .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
    .setAutoStart(true)
    .build()

// This is the placeholder for the imageView
    val shimmerDrawable = ShimmerDrawable().apply {
        setShimmer(shimmer)
    }


Glide.with(image.context).load(url)
        .placeholder(shimmerDrawable)
        .error(context.getDrawable(R.drawable.placeholder))
        .into(image)