Glide – Placeholders

Glide – Placeholders

Hello guys. In my previous tutorial, we introduced Glide, which is an Image Loading Library. Now in this tutorial, we are going to learn all about placeholders, which bridge the time until the image loading.

Placeholders with .placeholder()

We probably don’t even have to explain or discuss it: empty ImageViews don’t look good in any UI. If you’re using Glide, you most likely are loading images via an Internet connection. Depending on your user’s environment, this might take a significant amount of time. An expected behavior of an app is to display a placeholder until the image is loaded and processed.

Glide’s fluent interface makes this very easy to do! Just call .placeHolder() with a reference to a drawable (resource) and Glide will display that as a placeholder until your actual image is ready. Keep in mind that this process is done on the UI-thread. Thus, don’t use giant images for the placeholder. Instead, use smaller images which are fast to load as placeholders:

Glide 4.x

For obvious reasons, you cannot set an Internet url as placeholder, since that one would be required to be loaded as well. App resources and drawables are guaranteed to be available, accessible and relatively efficient. However, as the parameter of the load() method, Glide accepts all kind of values. These might not be loadable (no Internet connection, server down, …), deleted or not accessible. In the next section, we’ll talk about an error placeholder.

Error Placeholder with .error()

Let’s assume our app tries to load an image from a website, which is currently down. Glide does give us the option to get an error callback and take the appropriate action. While we’ll cover that option later, for now this would be too complicated. In most use cases a placeholder, which signals that the image could not be loaded is sufficient enough.

The call to Glide’s fluent interface is identical to the previous example for our pre-display placeholder, just with a different function call named error():

Glide 4.x

That’s it. If the image you define as load() value cannot be loaded, Glide will display R.mipmap.error_image instead. Once again, acceptable parameters for error() are only already initialized drawable objects or pointers to their resources (R.drawable.<drawable-keyword>).

Transitions

No matter if you’re displaying a placeholder before loading the image or not, changing an image of an ImageView is a pretty significant change in your UI. A simple option to make this change more smoothly and easier on the eye, is to use a crossfade animation. Glide ships with a standard crossfade animation, which is active by default for Glide 3.6.1 until Glide 3.8.0. If you want to force Glide to show the crossfade animation, all you’ve to do is another call on the builder:

Glide 4.x

The withCrossFade, or crossFade() methods have another method signature: (int duration). If you want to slow down (or speed up) the animation, feel free to pass a time in milliseconds to the methods. The default duration of the transition is 300 milliseconds.

Combining Everything

It is important to know that all these parameters are independent and can be set without relying on each other. For example, you could just set .error() without calling .placeholder(). You could set the crossfade animations without the placeholders. Any combination of the parameters is possible.

Summary

Hopefully you learned a lot from this tutorial. It is tremendously important for a good user experience that the images are not popping in unexpectedly. Also, make it obvious to the user when something goes wrong. Glide assists you with easy-to-call functions, which provide the things you need to design a better app.

Don’t forget to check out the official documentation, which also covers placeholders and transitions.

In the context of this tutorial series, we’re not done with the optimization options yet. In the next tutorial, we’ll look at image resizing and scaling.

Remember to subscribe, leave comments or suggestions below, and I will be happy to help you out.

Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.