In the last few tutorials, we've looked at ways to optimize the user experience when loading and displaying images. Caching images already takes a big step to a smooth user experience. However, if the image is very large, the processing can take a while until it is displayed. In this tutorial, we'll explore thumbnails as another optimization option.
Glide Series Overview
Advantages of Thumbnails
Before you go on to optimize with thumbnails, make sure you understood and exhausted all options for caching and request priorities. If you've implemented everything, then check if thumbnails can help you to further improve your Android app.
Thumbnails are different than the placeholders from a previous tutorial. Placeholders have to be shipped with the app as a bundled resource. Thumbnails are a dynamic placeholder, that can be loaded from the Internet as well. Thumbnails will be displayed until the actual request is loaded and processed. If the thumbnail, for whatever reason, arrives after the original image, it does not replace the original image. It simply will be dismissed.
Hint: another really nice way to smoothen the image loading process is to tint the placeholder background of the image in the dominant color for the image.
Simple Thumbnails
Glide offers two different ways for thumbnails. The first is the simple option where the original image is used, just in a smaller resolution. This method is particularly useful in combinations of ListView and detail views. If you already display the image in the ListView, let's just say, in 250x250 pixels, the image will need a much bigger resolution in the detail view. However, from the user perspective, he already saw a small version of the image, why is there a placeholder for a few seconds until the same image gets displayed again (in a higher resolution)?
In this case, it makes a lot more sense to continue to display the 250x250 pixel version in the detail view and in the background load the full resolution. Glide makes this possible with the .thumbnail() method. In this case, the parameter is a float as the size multiplier:
Glide 4.x
String internetUrl = "http://i.imgur.com/DvpvklR.png";
GlideApp
.with(context)
.load(internetUrl)
.thumbnail(0.1f)
.into(imageView);
Glide 3.x
String internetUrl = "http://i.imgur.com/DvpvklR.png";
Glide
.with(context)
.load(internetUrl)
.thumbnail(0.1f)
.into(imageView);
For example, if you pass 0.1f as the parameter, Glide will display the original image reduced to 10% of the size. If the original image has 1000x1000 pixels, the thumbnail will have 100x100 pixels. Since the image will be much smaller than the ImageView, you need to make sure the ScaleType of it is set correctly.
Note that all request settings you applied to the original request are also applied to the thumbnail. For example, if you used a transformation to make the image gray-scale, the same will happen to the thumbnail.
Advanced Thumbnails with Complete Different Requests
While the usage of .thumbnail() with a float parameter is easy to set up and can be very effective, it doesn't always make sense. If the thumbnail needs to load the same full-resolution image over the network, it might not be faster at all. Thus, Glide provides another option to load and display a thumbnail.
The second option is to pass a complete new Glide request as the parameter. Let's look at an example:
Glide 4.x
String internetUrl = "http://i.imgur.com/DvpvklR.png";
// setup Glide request without the into() method
RequestBuilder<Drawable> thumbnailRequest = GlideApp
.with(context)
.load(internetUrl);
// pass the request as a a parameter to the thumbnail request
GlideApp
.with(context)
.load(UsageExampleGifAndVideos.gifUrl)
.thumbnail(thumbnailRequest)
.into(imageView);
Glide 3.x
String internetUrl = "http://i.imgur.com/DvpvklR.png";
// setup Glide request without the into() method
DrawableRequestBuilder<String> thumbnailRequest = Glide
.with(context)
.load(internetUrl);
// pass the request as a a parameter to the thumbnail request
Glide
.with(context)
.load(UsageExampleGifAndVideos.gifUrl)
.thumbnail(thumbnailRequest)
.into(imageView);
The difference is that the first thumbnail request is completely independent of the second original request. The thumbnail can be a different resource or image URL, you can apply different transformations on it, and so on.
Hint, if you want to get crazy, you could make this recursive and apply an additional thumbnail request to the thumbnail request …
Outlook
This tutorial showed you two different approaches to load thumbnails for images with Glide. Don't forget this option for your polished apps! It can significantly help to decrease the empty ImageView times in your app. If you've questions, let us know in the comments!
In the next tutorial, we'll look at ways to load images with Glide, but where the target is not an ImageView.
