Using Volley to manage your ListView images. A tutorial

  • Written by  Clive

Using Volley to download and display images in a list

Android Volley tutorial list icon 

Here’s the second part of the Volley tutorial.

This is where we show you how to use Volley to download images and display them in a ListView.

Have you read the first part, Using Volley to download, cache and display bitmaps, where we set up the image loader and request queue in a Singleton?

The manifest

Before we start, we’re downloading the images over the network so we need internet access. Make sure that you include internet permission in your AndroidManifest.xml file:

Android Volley tutorial internet permission

Include the uses-permission line to get permission for your app to access the internet

Displaying the list: The MyListActivity Activity

Our MyListActivity Activity downloads and displays a list of images.

Android Volley ListView tutorial screenshot

The list of thumbnail images

Here’s the first part of the code:

Android Volley ListView tutorial ListActivity

Our MyListActivity extends the ListActivity class and implements the OnItemClickListener interface

Note the following:

  • our activity extends the ListActivity class
  • we implement an OnItemClickListener interface to handle the item selections
  • mImageLoader – our ImageLoader object which we’ll use to download the images
  • mNetworkImageView – we use it as a replacement for an ImageView in our list_image_item.xml layout file
  • imageArrayAdapter – our custom array adapter that will provide the images to the list

In onCreate()

Here’s the next bit of code:

Android Volley ListView tutorial ListActivity onCreate()

Get an instance of ImageLoader and set the adapter for the list

Note the following:

  • mImageLoader – we get an instance of ImageLoader from our MyVolleySingleton singleton
  • imageArrayAdapter – we create an instance of our custom array adapter. It has two parameters:
    • the context
    • the list layout which will display our image items
  • setListAdapter – we set the adapter that will supply the images to the list
  • getListView – we get this activity’s list view, the list view that will display our image items. The ListActivity has its own ListView object. This is why we don’t specify a layout in onCreate() with setContentView()
  • setOnItemClickListener – we register the listener to handle the image item selection

Creating our custom adapter

It all happens in the custom adapter’s getView() method. This is where we get the view to display a thumbnail image in the list.

Here’s part of the code:

Android Volley ListView tutorial ListActivity getView()

The getView() method gets a view and displays the image identified by position

Note the following:

  • convertView – we check if there’s an existing view that we can use, if not then we create a new one
  • itemView – this is the view that will display each thumbnail item in the list. We either use an existing item view or we create a new one if none exists
  • mNetworkImageView – this is our image view in the list_image_item.xml layout file
  • setDefaultImageResId – the image that will display during the download
  • setErrorImageResId – the image that will display if there is an error while downloading the image
  • setAdjustViewBounds – this allows the image boundaries to be adjusted while keeping its aspect ratio
  • setImageUrl – sets the url of the image to download and display. If the image is in the cache, then it will be displayed. If not then the default image will display while the image is downloading. There are two parameters:
    • the url of the image to be downloaded
    • the image loader that will take care of the download, caching and display
  • return itemView – the view containing the image is returned for display in the list

Selecting a thumbnail image item

Our list activity implements the AdapterView.OnItemClickListener interface which listens for when the user selects a thumbnail image.

We attach the listener to our list view by including the following line of code in onCreate():

Android Volley ListView tutorial ListActivity setListener

Link the listener to the list view to listen for when the user selects a list item

The listener’s onItemClick() method is executed when the user selects an item:

Android Volley ListView tutorial ListActivity onItemClick

The onItemClick() method is executed when the user selects an image in the list

Note the following:

  • we create an intent that we’ll use to start a new activity. The intent receives two parameters:
    • the context
    • the activity that we want to start
  • we include the selected item’s position in the intent as an extra
  • startActivity – starts the activity specified in the intent, the DisplayImageActivity activity. This is where we’ll display a larger version of the selected thumbnail image. You can read all about it in the first part of the tutorial, Using Volley to download, cache and display bitmaps.

Check out our GridView tutorial, Using Volley to manage your GridView 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?