After a lot of success and feedback on our Picasso series, we're following the requests to do an extensive series on another amazing image loading library: Glide.

Glide, like Picasso, can load and display images from many sources, while also taking care of caching and keeping a low memory impact when doing image manipulations. Official Google apps (like the app for Google I/O 2015) are using Glide. In this series, we're going to explore the functionalities of Glide and why it's superior in certain aspects.

Glide Series Overview

Why Use Glide?

Experienced Android developers can skip this section, but for the starters: you might ask yourself why you want to use Glide^* instead of your own implementation.

Android is quite the diva when working with images, since it'll load images into the memory pixel by pixel. A single photo of an average phone camera with the dimensions of 2592x1936 pixels (5 megapixels) will allocate around 19 MB of memory. If you add the complexity of network requests on spotty wireless connections, caching and image manipulations, you will save yourself a lot of time & headache, if you use a well-tested and developed library like Glide.

In this series, we'll look at many of the features of Glide. Just take a peek at the tutorial outline and think if you really want to develop all of these features yourself.

^* = or any other image loading library, like Picasso, ION, etc.

Adding Glide to Your Setup

Hopefully by now we've convinced you to use a library to handle your image loading requests. If you want to take a look at Glide, this is the guide for you!

First things first, add Glide to your dependencies. At the time of writing, the last versions of Glide is 4.8.0 and 3.8.0.

Gradle

As with most dependencies, pulling it in a Gradle project is only a couple of lines in your build.gradle:

Glide 4.x

// image loading library Glide itself
implementation 'com.github.bumptech.glide:glide:4.8.0'  
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'  

Glide 3.x

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

Maven

While we moved all our projects to Gradle, Glide also supports Maven projects:

Glide 4.x

<dependency>  
  <groupId>com.github.bumptech.glide</groupId>
  <artifactId>glide</artifactId>
  <version>4.8.0</version>
</dependency>  
<dependency>  
  <groupId>com.github.bumptech.glide</groupId>
  <artifactId>compiler</artifactId>
  <version>4.8.0</version>
  <optional>true</optional>
</dependency>  
<dependency>  
  <groupId>com.google.android</groupId>
  <artifactId>support-v4</artifactId>
  <version>r7</version>
</dependency>  

Glide 3.x

<dependency>  
    <groupId>com.github.bumptech.glide</groupId>
    <artifactId>glide</artifactId>
    <version>3.8.0</version>
    <type>aar</type>
</dependency>  

First Peek: Loading Image from a URL

Just like Picasso, the Glide library is using a fluent interface. The Glide builder requires at least three parameters for a fully functional request:

• with(Context context) - Context is necessary for many Android API calls. Glide is no difference here. Glide makes this very convenient by also extracting the context if you pass an Activity or Fragment object.
• load(String imageUrl) - here you specify which image should be loaded. Mostly it'll be a String representing a URL to an Internet image.
• into(ImageView targetImageView) - the target ImageView your image is supposed to get displayed in.

Theoretical explanations are always more difficult to grasp, so let's look at a hands-on example:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);  
String internetUrl = "http://i.imgur.com/DvpvklR.png";

Glide  
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

That's it! If the image at the URL exists and your ImageView is visible, you'll see the image in a few seconds. In case the image does not exist, Glide will return to the error callbacks, which we'll look at later. You might already be convinced with this three-line example that Glide is useful to you, but this is just the tip of the feature iceberg.

Generated API for Glide 4.x

Glide is very customizable. This is true for the 3.x version, but the extension system got even more powerful for Glide 4.x. The fluent interface we've shown you above is fixed for Glide 3.x. Starting with the 4.0 release Glide creates a custom fluent interface depending on your customization. Glide's developers call this result generated API. To differentiate between the standard Glide object and the generated API, we'll use different names.

In order to create the generated API, which we'll use in all upcoming tutorials, you'll have to create a class extending AppGlideModule somewhere in your app project:

@GlideModule
public class FutureStudioAppGlideModule extends AppGlideModule {

}

Don't forget the @GlideModule! Then, by default, the generated API is accessible via GlideApp. For example:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);  
String internetUrl = "http://i.imgur.com/DvpvklR.png";

GlideApp  
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

Whenever you see GlideApp in our code snippets you know we're using Glide 4.x, and the generated API. We'll go deeper into the generated API in an upcoming, new tutorial.

Outlook

With this tutorial we tried to motivate you why Glide is useful for your Android app development. It's an excellent app and their developers are very active and responsive to issues. You'll always find help on their GitHub issues or the official documentation. That's one reason we continue to recommend Glide. Not just because of the excellent library itself, but because the continued support and improvement :thumbsup:

In our next tutorial, we'll start to look at other options to load images, besides from an Internet URL. Specifically, we'll load an image from Android resources, local files and a URI.