How to Load Images in Android Using Glide
Up until recently, loading images on Hootsuite’s Android app had been done via Volley, an asynchronous networking library. We now use a library purpose-built for image loading and caching called Glide. Given the recent change, it seemed worthwhile to examine first, what pain points Glide addresses and then do a walkthrough of how it’s used.
Why the change?
Volley is an HTTP library and that handles the main pain points surrounding loading images – namely, networking and caching – but is not made solely for that purpose. The problem? Loading a remote image into an ImageView can get verbose. Glide can do the job in one line and is a nice wrapper for an HTTP client. Glide uses HttpUrlConnection as its default network stack, but can be set to use Volley or OkHttp. Two other key benefits of Glide are, smoother loading when scrolling through a view that contains images (see the example below); and perhaps more importantly, animated GIF support. Viewing and posting media to social networks is central to Hootsuite so using a library that makes loading images a better experience for users and easier for programmers makes a lot of sense.
Glide offers some additional advantages over other image loading libraries. For example, when loading an image, Glide will cache both a version of the image in its original size as well as one that’s the size of its intended ImageView. This means Glide loads the image noticeably faster than libraries like Picasso because no resize is necessary. Additionally, Glide works with Android’s ImageView. Normally, this wouldn’t bear mentioning except that a number of libraries do not work with ImageView. For example, Facebook’s Fresco uses DraweeView and Volley uses NetworkImageView. Glide doesn’t deviate from the standard ImageView so it is easier to begin using.
How to Use Glide
Importing Glide into an Android project is done by including the following in your build.gradle file. First Glide, then Android’s Support Library v4.
It’s important to keep in mind that Glide requires Android’s Support Library v4, so support-v4 needs to be imported along with Glide itself.
So how is it used? Easy.
Where the parameter for load() is the url (or File or Uri) of the image you’d like to display and for into(), the ImageView in which you’d like the image to display. Hootsuite actually uses Butter Knife to bind views to fields, but that’s for another blog post. For Picasso users, this will all look incredibly familiar, with a notable exception: whereas Picasso requires the Context as an argument for with(), Glide takes any among the Activity, Context, or Fragment. The benefit of passing in the Fragment or Activity? Image loading, its memory management, and the pausing and resuming of GIFs are then in step with the lifecycle of the activity, all important when it comes to battery use. A nice little feature.
But those are just the basics. Glide also offers a number of modifiers, so that loading an image can end up looking like what we do to display video thumbnails:
There are a few things going on here.
- fitCenter() is the equivalent to setting the ImageView’s scale type to “fitCenter” in the corresponding layout file. centerCrop() is another option. Either way, don’t be like me and spend more time than I’d care to admit wondering why setting the scale type is having no effect; Glide will override whatever you set the ImageView’s scale type to in your layout file, so set it programmatically.
- animate() allows you to select a custom animation to run when the image resource has finished loading. Glide defaults to crossFade(), which for all intents and purposes is probably all you’ll want or need (read: it looks good). However, because crossFade() requires that the image have the same aspect ratio as its placeholder and distorts the image if it doesn’t, we make a call to animate(), which will override the default. Want just the barebones? dontAnimate().
- I mentioned the image placeholders briefly above. placeholder() displays a drawable while the resource is still loading. Glide’s animating makes for a smooth transition between the placeholder and actual image. I recommend adding a placeholder in all cases, but especially where loading is particularly slow, otherwise you’re left with a blank ImageView. In the sample above I’m grabbing a frame from the video, converting it to a drawable, and using it as a placeholder until the actual thumbnail loads.
- What isn’t shown in this example is asGif(), which will attempt to load the given image as an animated GIF and fail if it is not one. Generally, though, this call is unnecessary because Glide will load the resource into a GifDrawable automatically if it is animated. There’s also asBitmap(), which will ensure that the resource is loaded as a static image, even if it could be animated. I’m an advocate for animating all GIFs at all times, but it’s also important to keep in mind that animated GIFs are resource intensive and, at least according to the Design team, distracting at times.
About the Author
Madeleine is a Software Developer Co-op on the Publisher team at Hootsuite. She enjoys reading, beer, the great outdoors, and doesn’t really like writing about herself in the third person.