Image Blog Android Image Loading with Glide
March 24, 2016

Android Image Loading With Glide

Java Application Development

In this article, we look at how to use Glide for Android image loading, including how to transform and cache images in your Android application.

Our Glide Project Recap

In my previous post I gave a quick overview of Picasso library. You don’t have to read it, to get the most of this post, but if you want to compare the libraries, scroll through it, it will give a good overview of how Picasso is.

Long story short I’m on a journey to write an Android application after a break. As I’m in the middle of picking my image loading library I thought about writing a short summary of my journey. Maybe you are new to Android or just haven’t done it for a while, I hope you’ll get some ideas and help from here.

Here is a quick recap of what I’ve been doing with these image loading libraries and how I intend to use them in the application. My criteria for picking the image loading library is pretty simple:

  • Simple API that should be easily wrappable behind an interface so I can replace it anytime.
  • Ease of image manipulation: rotating, scaling, blurring, mirroring and so on.
  • Caching — the library should store the images on the device and avoid pulling more data than needed.

I also have a reference project built where Glide and Picasso happily co-exist. I’ve wrapped my image loading logic behind an interface ImageLoader with a single loadImage() method which takes two arguments String url and ImageView component to render the image.

Getting Started With the Glide Android

By switching out the imageloader implementation used in the ContributorsAdapter I can easily use the GlideImageLoader, which is using the ImageLoader interface. Getting started with Glide is as easy as using Picasso. Their API also look quite similar. To start using Glide in your project you need to follow these steps.

Step 1. add the Gradle dependency to your android module build.gradle:

compile 'com.github.bumptech.glide:glide:3.7.0'

Step 2. implement the loadImage(String url, ImageView imageView) method with Glide

public void loadImage(String url, ImageView imageView) {

Step 3. apply the changes and observe the images! Seems to work the same way as Picasso. Android Glide Images Loading

Image Transformations With Glide

It shouldn’t come as a surprise, that there is a transformation library for Glide as well! So you can use most common transformations without the need to implement bitmap manipulations yourself. Add the transformations library to your build.gradle file:

compile 'jp.wasabeef:glide-transformations:1.3.1'

Using the transform() method in Glide is really straightforward, it takes a Transformation object that specifies the logic of the transformation required:

public void loadImage(String url, ImageView imageView) {
  Glide.with(imageView.getContext()).load(url).transform(new BitmapTransformation(imageView.getContext()) {
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
      return null;

    public String getId() {
      return null;

However, the BitmapTransformation.transform method has a few additional parameters. Let’s use it to implement a more sophisticated transformation:

protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
  //Create a new BlurTransformation
  BlurTransformation blurTransformation = new BlurTransformation(imageView.getContext());

  //Get the blurred bitmap resource
  Resource blurredBitmapResource = blurTransformation.transform(BitmapResource.obtain(toTransform, pool), 10, 1);

  Bitmap combinedBitmap;
  //Get the blurred bitmap object from the resource
  Bitmap bottom = blurredBitmapResource.get();

  //Try to find a bitmap object from the bitmap pool, saves us from creating a new bitmap object . If none is found, create the bitmap object with required format and measurements
  if ((combinedBitmap = pool.get(toTransform.getWidth(), bottom.getHeight() / 3 + toTransform.getHeight(), Bitmap.Config.ARGB_8888)) == null) {
    combinedBitmap = Bitmap.createBitmap(toTransform.getWidth(), bottom.getHeight() / 3 + toTransform.getHeight(), toTransform.getConfig());
  //Create a canvas for the combined bitmap
  Canvas comboImage = new Canvas(combinedBitmap);
  //Draw bitmap to canvas
  comboImage.drawBitmap(toTransform, 0f, 0f, null);
  //Create a matrix to for mirroring, scaling and updating position
  Matrix matrix = new Matrix();
  matrix.preScale(-1 , 1);
  matrix.postTranslate(0, toTransform.getHeight() * 2);
  //Set new matrix before drawing
  //Draw the blurred part to canvas
  comboImage.drawBitmap(bottom, 0f, 0f, null);
  //Obtain the bitmapresource object from pool and return the bitmap object.
  return BitmapResource.obtain(combinedBitmap, pool).get();

And in addition the getId()

public String getId() {
  return GlideImageLoader.class.getName() + ".Transformation";

The code above implements a single Transformation to do the complex manipulation of the images. It takes the bottom third of the image, mirrors it horizontally, blurs it and appends to the bottom of the original image. You can do that with 3 transformations applied sequentially, but you’ll face some challenges on that way. First of all, it won’t be efficient at all, you’ll need to create the bitmaps for every transformation, so it can become memory hungry. Also since the last step is to stitch two images together: the original and the mirrored, blurred bottom part, you need access to both of them in the Transformation code. I’ve tried that, but the code looked so messy I ditched that approach.

So this multi-transformation is a bit more complex and took a bit more time to figure out, but I’m pretty happy with the result, especially since I wanted to be optimal with the BitmapResources objects and not create new Bitmap objects when I can reuse the cached instances from the pool. Otherwise the logic how I draw bitmaps to canvas and how to do transformation is the same as in the previous post about Picasso.

In general, I didn’t find the transformation API of Picasso and Glide really different and I think they are similarly powerful. However, it was easier to implement a more efficient approach with Glide, so in my book Glide wins here. glide_transform

Caching With Glide

Out of the box Glide has both disk and memory caching enabled. And this is pretty much what I need by default. I was curious about what are the default parameters for the disk and memory caches.

If you recall the last post about Picasso, the memory cache was 15% of the available application RAM and 2% storage space up to 50MB, but no less than 5MB. That sounded quite reasonable at the time so I didn’t go into more details to figure out the reasoning behind that.

To see how Glide picks its caching strategy, one can check out the MemorySizeCalculatorimplementation. In short it takes into account if the current device is a low memory one, the screen size and the density. The disk cache is 250MB by default, and you can find all the cached images under the /data/data/ directory. Out of curiosity, I checked that folder and found out that all the images written to the disk were already transformed, and no original image was preserved. This means that it will possible redownload the images again when needed. At the same time, storing the result image is reasonable as well.

Anyway, caching is one of the hardest problems in software, so without the actual use case and the benchmarks, there’s little point in pointing fingers and deciding which approach is better. Glide has the cache enabled by default and this is a great starting point.

Final Thoughts

Glide and Picasso are quite similar in terms of API design, might even say identical. The transformations API for Glide was a bit more complicated but also more powerful. It made me think about creating new bitmap objects and allowed to reuse the bitmaps easily.

For now I’ll keep Picasso still as my go to image loading library for the project. Should I need to add gif loading to my project, it will be a 5 minute swap in the project to enable Glide.

Additional Resources

Looking for ways to improve your Java development?

Our Java resources range from webinars to eBooks and offer expertise from our Java experts.

See Latest Resources

Get Started With Rebel

Activate your free trial.

Try JRebel