Loading a smaller resolution image until the larger resolution one is done downloading

Question

I am building an Android app using Firebase Storage, Real-Time Database, pretty much everything. The app will allow users to upload images, and other users to see those images. Currently I am using a plugin to resize and crop the images, then storage an 800x800 resolution version of that image in the Firebase storage bucket, and that is what other users are seeing. It works well, but I would like to remove the 800x800 resolution restriction so that users of devices with huge resolution can see better quality images. The problem is, I am having trouble figuring out what the best process is for this. Currently I am using the Glide library to handle loading images once I have the downloadURL from firebase storage. What I would like to do is have something that will allow the app to load a low resolution version of the image, say when the user first scrolls that image into view it quickly loads a small 200x200 resolution image into the view, but then is loading the full scale resolution in the background. Once that full resolution one is done downloading, it replaces the low quality one with the full resolution one.

I have seen stuff like this with apps like Instagram, where if the user has uploaded a really high quality image, when you first scroll that post into view, the picture is pixelated and not that great, but after a second or 2 the image is really high quality. I can handle logic on the backed using Firebase functions to resize images after they are uploaded and store the 2 different resolutions. I just really stuck on the loading end of it. I have searched and searched and searched and I can't really find much on it. There are a lot of articles about why you should do it, but I can't find any real examples of how you would actually accomplish such a task.

Currently my images are loaded in an extremely simple, and document recommended way...

Glide.with(this).load(imageURL).into(imageView);

I could really use some help on how to handle loading a low res image first, then a high res one after the item is in view for a second. Thank you.

Answer 1

As of Glide 4.0, there is a native way of doing this, called Thumbnail Requests.

You can make one like this:

Glide.with(context)
  .load(url)
  .thumbnail(Glide.with(context).load(thumbnailUrl))
  .into(imageView);

More info in the official Glide documentation.

Answer 2

You could just load the low res one first, as you know it’ll be fairly quick, and then load the high res image once the low res image has been loaded.

Glide.with(this)
 .load(lowResImageUrl)
 .listener(new RequestListener<String, GlideDrawable>() {
     @Override
     public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
         return false;
     }

     @Override
     public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
         Glide.with(yourContext).load(highResImage).into(imageView);
         return false;
     }
 })
 .into(imageView)