Home » Blog » Using Glide to Efficiently Load Images in Android

Using Glide to Efficiently Load Images in Android

5 key concepts that will supercharge your work with images

cat illustration
Fritz Author
8 min Updated:

Displaying images is one of the most common tasks for any Android developer, but it can become challenging to manage for a variety of reasons.

The process requires loading and displaying the image, handling caches and image manipulations, loading the correct size of the image in the memory, handling network requests if you are loading the image from the internet, much testing, and many other nightmares.

Fortunately, we can save time and accelerate the development process without writing any boilerplate code by using well-tested libraries. Glide is one of the libraries that Google recommends for image loading.

Glide works to load and display images in the most optimized manner, as fast and smooth as possible. From the description in the official GitHub repository:

Project setup 📐

To start, open up Android Studio and create a new project or open an existing one.

Add the following dependencies, as shown in the code snippet below. Note that, at the time of writing, the last stable version of Glide is 4.11.0:

// use the annotation arocessing plugin for kotlin 
apply plugin: 'kotlin-kapt'

dependencies {
  /* other dependencies
  .....*/
  
  // glide dependencies
  implementation 'com.github.bumptech.glide:glide:4.11.0'   
  kapt 'com.github.bumptech.glide:compiler:4.11.0'
}

1. Getting Started 🔰

The Glide library makes it simple to load an image. It requires, at minimum, just three parameters:

  • The Context — Passed through the with() function. Glide requires an Android context object to complete the internal processes needed for image loading.
  • The Image — Passed through the load() function. You can specify which image should be loaded—it can be an internet URL, Android resource, local file, or a URI.
  • The Target — Passed through the into() function. This parameter will represent the ImageViews and Targets where your image is assumed to be displayed in.

Here’s a code snippet that loads an image found on the internet in an ImageView:

// get reference to your image target
val yourImageView = findViewById(R.id.yourImageView) as ImageView

// sample image url
val imageUrl = "https://i.picsum.photos/id/995/200/300.jpg"

// Glide image loading
Glide.with(context)
     .load(imageUrl)
      .into(yourImageView)

2. Other Image Sources 🚎

As mentioned above, with Glide you can load images a variety of sources: files, URIs, Android resources, bitmaps, drawables, etc. For each, the syntax stays the same. We just use the load()method to receive the image in one of these other formats:

// your image  in differen format
val someResource = R.drawable.resource
val someFile = File(...);
val someURI = Uri.parse("some//Uri/resource");
val someBitmap = ...

// loading with glide
Glide.with(context)
    .load(someResource)
    .into(yourImageTarget);

GIFs and Videos

With Glide, you can also play local video files and load GIF image files, and the process for loading these files is essentially the same as the one we use to load other images.

Something to note here—say we want to display a GIF from an internet URL, but this URL doesn’t return a GIF, but a standard image instead. Even so, Glide will display the GIF and try to play it as intended!

To make sure the GIF is displayed as intended, we can add a check with the asGif() method, which tells Glide to check whether the image is a GIF or not. If not, the error() method gets called (we’ll see this in a minute).

Glide.with(context)
    .load(GIFURL)
    .asGif()
    .into(yourTargetImageView);

Also, there’s another check method called asBitmap(), which ensures we display the needed image as a regular image.

For example, if you’re loading a user’s profile image, and your server returns back a GIF URL, you know that this GIF won’t play because the asBitmap() method makes it static.

Glide.with(context)
    .load(imageURL)
    .asBitmap()
    .into(yourTargetImageView);

3. Placeholders 🏛️

If you’re loading an image from the internet, you know this can take some time. And meanwhile, your user interface will be empty, waiting for the image to be displayed. We know that empty ImageViews don’t look good on any screen!

To help fix this issue, we use what are known as placeholders, which are images that are displayed until the image is loaded and processed. Placeholders are images that are presented while a request is in progress.

Glide makes it super easy to display placeholders using the placeholder() method. It that takes drawable resources as a parameter and displays the placeholder until your actual image is ready.

Glide.with(context)
    .load("yourImageURL")
    .placeholder(R.drawable.ic_image)
    .into(imageView)

Error

We can also set a placeholder for errors. For example, if an error happens during image loading (e.g. image doesn’t exist), Glide will display the image you specify with the error() function, that takes a drawable resource or another Glide request as a parameter.

// error image in the phone
Glide.with(context)
    .load("yourImageURL")
    .placeholder(R.drawable.ic_image)
    .error(R.drawable.ic_error)
    .into(imageView)

// load another image error
Glide.with(context)
    .load("yourImageURL")
    .placeholder(R.drawable.ic_image)
    .error(Glide.with(context).load("anotherImageURL"))
    .into(imageView)

4. Image Resizing 📏

By default, Glide also resizes images it takes in cache and memory to match the dimensions of the ImageView. But you can also resize an image to any dimensions you want via override(x,y) , with x and y as pixel values.

Glide.with(context)
    .load("yourImageURL")
    .override(700,350)
    .into(imageView)

You can also scale your image with general transformations, which you can apply directly to Glide’s requests, such as:

  • Center Crop: with the centerCrop() method.
  • Fit Center: with the fitCenter() method.
  • Center Inside: with the centerInside() method.
  • Circle Crop: with the circleCrop() method.
// apply center crop transformation
Glide.with(context)
    .load("yourImageURL")
    .centerCrop()
    .into(imageView)
    
// apply fit center transformation
Glide.with(context)
    .load("yourImageURL")
    .fitCenter()
    .into(imageView)
    
// apply center inside transformation
Glide.with(context)
    .load("yourImageURL")
    .centerInside()
    .into(imageView)
    
// apply circle crop transformation
Glide.with(context)
    .load("yourImageURL")
    .circleCrop()
    .into(imageView)

5. Caching 📕

One of the key features of successful and effective image loading is caching. For example, if we want to minimize the number of network requests our application is making, we should cache the images in memory or in the disk. Glide offers such a feature at no cost.

Glide automatically makes all caches all image requests in memory and on disk. This is, generally speaking, a good thing, but in some cases it might not be the desired behavior (e.g if images are changing frequently).

One thing to note is that Glide automatically caches two images: the original full resolution image and a smaller version of that image. For example, if you request an image with 2000×2000 pixels size and your ImageView is 750×750 pixels, Glide will put both images in the cache.

Skip Memory Cache

If you want Glide to not put the image in the memory cache, you can simply use the skipMemoryCache() method with boolean true as a parameter. This will make Glide allow the loaded resource to skip the cache memory.

Here is a code snippet:

Glide.with(context)
    .load("yourImageURL")
    .skipMemoryCache(true)
    .into(imageView)

Skip Disk Cache

If you want to disable disk caching, you can use the diskCacheStrategy() method that takes an ENUM as a parameter. The needed ENUM is DiskCacheStrategy.NONE—we’ll see the other enums in a minute, but here’s a code snippet that tells Glide to not cache the loaded images on the disk cache:

Glide.with(context)
    .load("yourImageURL")
    .diskCacheStrategy(DiskCacheStrategy.NONE)
    .into(imageView)

Disk caches variants

Glide has more than one choice for the disk cache behavior. Here’s a full list:

  • DiskCacheStrategy.NONE: This option caches nothing, as discussed in the section on skipping the disk cache.
  • DiskCacheStrategy.DATA: This option caches only the original full resolution image (the 2000×2000 pixels image we used as an example).
  • DiskCacheStrategy.RESOURCE: This option, on the contrary caches only the final result image, after reducing the resolution.
  • DiskCacheStrategy.ALL: This option caches all versions of the image.
  • DiskCacheStrategy.AUTOMATIC: This is the default option, which intelligently chooses a cache strategy based on the nature of the resource (i.e. if it’s a remote or local resource).

Invalidate Cache

Under some circumstances, you might want to clear the cache. Glide also makes this process reasonably easy, flexible, and simple using only two methods: clearDiskCache() and clearMemory(). Here is another code snippet showing these in action:

// invalidate the disk cache.
//This method should always be called on a background thread
Glide.get(this).clearDiskCache()

// invalidate the memory cache.
Glide.get(this).clearMemory()

Conclusion 🏁

Properly and efficiently handling images in Android can be a nightmare if you decide to do it on your own. Fortunately, libraries like Glide can save you a ton of time and give you the power of working with images in an optimized manner. With this extra development time, you can focus more directly on your application’s core functionalities.

Even though this article only worked through the basics, Glide offers much more than that. You can learn more in the official documentation of Glide, and specifically, I encourage you to dig deeper into the following advanced concepts:

  • Thumbnails
  • Callbacks and custom targets
  • Transitions
  • Transformations
  • Request priority
  • Modules and configuration

I hope this article has helped you learn some of the basics of loading images on Android using Glide. And maybe it’s even motivated you to start using Glide in your future Android projects!

Resources 📚

  • ImageView Scale Types
  • Glide library official website
  • Glide library on GitHub.
  • Glide Javadocs.
  • Picasso library
Submit to reddit Add to buffer Save to pocket Share on LinkedIn Email

Fritz

Our team has been at the forefront of Artificial Intelligence and Machine Learning research for more than 15 years and we're using our collective intelligence to help others learn, understand and grow using these new technologies in ethical and sustainable ways.

Comments 0 Responses

Leave a Reply

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

wix banner square