Using GIFs as Placeholders in Glide: A Step-by-Step Guide

Photo by Maxim Ilyahov on Unsplash

Glide library is a popular image loading and caching library for Android.The ability to use placeholders while loading images is one of its greatest advantages.In this article, we will take a closer look at how to use GIFs as placeholders in Glide.

Showing GIFs in Glide is quite simple. You can load a GIF by using one of the functions in the code snippet below:

fun ImageView.load(url: String) {
    Glide.with(this)
        .load(url)
        .into(this)
}

fun ImageView.loadGif(url: String) {
    Glide.with(this)
        .asGif()
        .load(url)
        .into(this)
}

fun ImageView.loadGif(@DrawableRes resGif: Int) {
    Glide.with(this)
        .asGif()
        .load(resGif)
        .into(this)
}

fun ImageView.loadDrawable(@DrawableRes resGif: Int) {
    Glide.with(this)
        .load(resGif)
        .into(this)
}

In the preceding code, the.asGif() method is used to specify that the image being loaded is in GIF format. This method tells Glide to treat the image as a GIF and play the animation when the image is displayed. Keep in mind that the.asGif() method should only be used if the image is in GIF format; otherwise, the function will throw an error.It is also worth noting that you can also load GIFs from the internet using the same method by using the URL of the GIF instead of the drawable resource ID.

Moreover, showing placeholders in Glide can be achieved by using either the .placeholder()method or the .thumbnail() method.

The .thumbnail() method is best used for loading thumbnail resources that are smaller and will be loaded more quickly than the full size resource. It can make network requests and load from drawable. .placeholder()method , on the other hand, sets an Android resource id for a Drawable resource to display while a resource is loading.

The point here is that .placeholder() is not animated, thus gif is not animated. Thus, .thumbnail() must be used.

Here is a working sample code that uses the .thumbnail() method to show a GIF as a placeholder:

fun ImageView.loadUseGifThumb(imageUrl: String, @DrawableRes resGif: Int) {
    Glide.with(this)
        .load(imageUrl)
        .thumbnail(Glide.with(this).load(resGif))
        .into(this)
}

For example, you can call the above method like this:

binding.imageView.loadUseGifThumb(
    imageUrl = "https://images.unsplash.com/photo-1673901736230-ce32ba28009d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80",
    resGif = R.drawable.loading
)

Here is an sample output.

As a result, Glide’s usage of GIF placeholders is a fantastic method to improve user experience. By using the .thumbnail() method, you can easily display a GIF as a placeholder while the target image is loading. I hope this article was useful to you. Thank you for reading and best of luck on your next project.

Love you all.

Stay tuned for upcoming blogs.

Take care.

Linkedin