Using Volley to download, cache and display bitmaps

Written by Clive

Using Volley to download, cache and display images in lists and grids

Volley is an HTTP Library that makes networking for Android easy. It’s developed by Google and is free to use in your apps.

This is what Volley can do for you:

You can automatically schedule network requests
You can have multiple concurrent network connections
You can use disk and memory caches
You can prioritise your requests
You can cancel your requests
You can customize Volley according to your needs
Your requests are ordered so its easy to populate your UI with data fetched asynchronously from the network
Volley supports the download of strings, images and JSON

Volley is not suitable for large downloads or streaming (Volley holds all responses in memory during parsing so large downloads will use a lot of memory).

You should use the DownloadManager for large downloads.

We’re going to be using Volley to download images for display in a list and grid.

Our Tutorial app

Our tutorial app downloads a number of images and displays them in either a list or in a grid.

Selecting a thumbnail image displays a larger version of it in a new activity.

We use the Volley Library to take care of the downloading, resizing, caching and displaying of the image.

Android Volley Library ListView and GridView tutorial screenshot 1

The downloaded images are displayed in either a ListView or a GridView

Android Volley Library ListView and GridView tutorial screenshot 2

A larger version of the selected image is displayed in a new activity. The image is retrieved from the cache, if possible, when changing screen orientation

Setting up Volley

To use Volley, you need to:

clone the Volley repository – get the details from the documentation here
import the downloaded source into your app project as an Android library project

You can get a free book, Pro Git by Scott Chacon, if you need some more info on using Git.

You can use the Git for Windows free tool (or similar) to do the cloning. Then in Android Studio:

import the clone as a module into your project. File>Import Module
then set the volley clone as a dependency for your app. File>Project Structure. Select your project in left window, click Dependencies tab, click plus sign (+) on right, select Module Dependencies from the drop-down list, select the volley module and press OK. Gradle should rebuild automatically and you should be able to use the Volley Library in your code

Downloading images

We’re interested in downloading images. There are two ways of doing this with Volley:

by using ImageRequest – this gets an image at a URL, returning a Bitmap. You can set the required size. Volley does the processing off the main thread
by using ImageLoader – this loads and caches images from remote Url’s. It’s like a manager of multiple ImageRequest’s. It’s ideal for loading images into lists and grids. You can include a memory cache

Our special image view: The NetworkImageView

You would use NetworkImageView in combination with ImageLoader when loading multiple images like you would in a grid and list.

Android Volley Library ListView and GridView tutorial networkImageView

NetworkImageView replaces an ImageView in your XML layout file

Whichever method you choose to load your images, you will need to create an instance of ImageLoader or ImageRequest.

You can do this in your activities when needed but in the case of ImageLoader, it could be a problem if your activity is destroyed and then recreated. The memory cache will also be destroyed resulting in image flicker.

Therefore it’s best to use a Singleton to instantiate ImageLoader and ImageRequest. You then access these through the Singleton from anywhere in your app.

Doing it this way ensures that the memory cache will remain alive during the entire lifetime of the app.

The MyVolleySingleton class

We use the Singleton class to provide a RequestQueue and ImageLoader which we can access from anywhere in the app.

I’ve copied the MySingleton code from the example in the official documentation. I’ve made one change by passing an instance of a cache to the new ImageLoader() constructor:

Android Volley Library ListView and GridView tutorial LruCache

We pass the LruCache as a parameter to ImageLoader

The cache: MyLruBitmapCache

If you want your images to be cached in memory when using ImageLoader, then you need to tell Volley to do so.

We’ve specified that Volley should cache the images using our MyLruBitmapCache. It’s a copy of the LruBitmapCache code which you can find in the official documentation.

Each time we instantiate an Imageloader it will include a cache. The cache will be able to cache about three screens worth of images.

Our image Url’s: The ImageUrlArray Class

The ImageUrlArray class contains a number of url’s of images that we want to download.

Here’s a bit of the code:

Android Volley Library ListView and GridView tutorial image url's

Our IMAGES string array contains the URL’s of images that we want to download and display

Some of the images are quite large and may take a second or so to download. You can put your own url’s in here if you wish.

Once downloaded, they’re cached and will be loaded from the cache.

The Menu: The MyMenuActivity Activity

Our MyMenuActivity activity creates the options menu and processes the menu item selections.

The options menu is available in all the activities. Pressing the options menu button displays the menu items.

We extend this activity class when creating our other activities so that we can access the menu from these activities.

There are two menu options:

display a list – displays the downloaded images in a ListView
display a grid – displays the downloaded images in a GridView

The MainActivity Activity

The main activity is the entry point to the app. It displays a line of text.

The main activity displays a single line of text. Pressing the overflow menu button displays the menu

Displaying a large version of the thumbnail image: The DisplayImageActivity Activity

Selecting an image in either the list or the grid, displays a larger version of it in the DisplayImageActivity activity.

Here’s part of the main code:

Android Volley Library ListView and GridView tutorial displayImageActivity

Displaying the selected thumbnail image

Note the following:

imageIndex – the DisplayImageActivity activity is started by an intent when an image is selected in either the list or grid. The position of the selected image is passed in the intent. We get the position value out of the intent and assign it to imageIndex which we’ll use to get the image for display
mImageLoader – our ImageLoader object. We’ll use it to handle the loading and caching of the images. We’ve configured the loader in the Singleton, MyVolleySingleton to include a memory cache
get – requests a bitmap from the given url. There are four parameters:
- the image url
- the listener – listens for the network response. It has three parameters:
  - the image view to display an image
  - a placeholder image to display while the download is in progress
  - an error image to display if there is an error while downloading
- the maximum width of the returned image
- the maximum height of the returned image

Have a look at part two of the tutorial, Using Volley to manage your ListView images, where we show you how you can use Volley to download and display your list thumbnail images.

I hope that you have found this tutorial helpful.

If you need more info on ArrayAdapters and lists, have a look at our Android ListView tutorial and the article on Adapters, Android Adapters: what are Adapters?

Have you seen the tutorials on the other Image Libraries, Picasso and the Universal Image Loader?

Free Android app covering all aspects of addiction, including prevention and treatment