Custom Image Loader using Glide and What I learned.

4 min readJun 16, 2021

This gonna be my very first English post related to Android Development. As a promise to myself, I will keep my medium account occupied with the problems that I spend my days but luckily solved. Because I believe that the more convenient way to learn is through writing. I have benefited from writing throughout my life. So, feel free to send me feedback.

Let’s get down to the business…

As a normal scenario, most image services are returning image links as an endpoint and you are good to use them thanks to an image loading library like Glide or Picasso. But what happens when you only got an image id for an image first? Then You need to get the image as soon as you got the id from the first response. I’ve tried the silly approach which is getting image URLs in the for loop, use them afterward as a suggested simple way. This was not the solution that I wanted and spend my 2 days solving this issue. When I feel lost, I decided to ask the GDG Istanbul slack group and Hadi Tok suggested a perfect way to implement a custom image loader using Glide or Picasso. Then I researched documentation and finally found a solution to my problem. Here is the journey;

The traditional way to load an image using glide library is depicted below;

Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);

In our case; we had an image service that is returning image ids and Base64 strings for the belonged image, as below;

It’s clear from the image that we must make another separate request to get the image’s Base64 String. In order to solve this issue, first I modified the Glide library’s load functionality. Here what I did;

Model Loader

In order to use Base64 Strings as an input, we have to extend our ModelLoader class using ByteBuffer. Besides images from a remote server, I’m also loading local images using Glide, and for that reason, I should have to say that if our model is starting with /data or /storage we should use a normal loading approach. That handle method appropriate for controlling input format.

The second step is creating ImageData Fetcher which is a class that returning our images as a Base64 encoded string according to its picture_id, the key point here is we have to define the data source remote. As soon as we got data then we need to use onDataReady method;

Image Data Fetcher for remote sources.

According to Glide library’s documentation, we may explain the cancel and cleanup model as below;

cancel

For networking libraries or long running loads where cancellation is possible, it’s a good idea to implement the cancel() method. Doing so will help speed up other queued loads and will save some amount of CPU, memory, or other resources.
In our case, Base64 doesn’t offer a cancellation API, so we can leave it blank:

cleanup

cleanup() is an interesting one. If you’re loading an InputStream or opening any kind of I/O resources, you absolutely must close and clean up the InputStream or resource in the cleanup() method.

The third step is creating App-specific Glide module which is required in order to use our custom loader.

AppGlideModule

In the code above, you may aware that we have ImageModelLoaderFactory class, this class is also required to load our ImageLoader class properly.

ImageLoaderFactory

Last but not least; in order to use all this functionality. We have to add Glide’s annotationProcessor as a dependency;

annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

That brings us to the end and we are able to load our images using Glide again. It’s depicted below that we are just giving pictured as a load parameter to Glide and it’ handles loading images background. That’s pretty much for solving this issue.

What was the key things that I got from this issue;

Reading documentation is saving a life, sometimes you are debugging more than one day and realize that the issue is not solvable, at the beginning If I had read the documentation carefully, maybe I should come across the solution.
It’s obvious that you should not act hesitant when asking questions in groups, communities, events…etc. Personally, I am avoiding asking questions in communities but I learned from this issue that every single question is directing you to another harbor.
Don’t even think complex, try to think simple and not try to solve problems using traditional way for example for loop like me😐

If you have an amendment or something else feel free to ask me.

Thanks a lot.

Custom Image Loader using Glide and What I learned.

References

Written by Salih Yalçın