Using Volley to manage your GridView images. A tutorial

  • Written by  Clive

Using Volley to download and display images in a grid

Android Volley GridView Tutorial  grid icon

Here’s the third part of the Volley tutorial.

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

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?

If you’re interested in loading images into a ListView, have a look at part two of our series of Volley tutorials, Using Volley to manage your ListView images.

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 GridView Tutorial internet permission

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

Displaying downloaded images in a grid

Our GridViewActivity activity displays a grid of downloaded images.

Android Volley GridView Tutorial screenGrid

The downloaded images are displayed as thumbnail images in a grid

In the beginning

Here’s the first bit of code:

Android Volley GridView Tutorial gridViewActivity1

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

Note the following:

  • our GridViewActivity activity extends the MyMenuActivity class so that we can display the options menu
  • mImageLoader – we get an instance of ImageLoader from our MyVolleySingleton singleton
  • mNetworkImageView – this is our image view in the grid_image_item.xml layout file
  • gridView – our grid view that displays the image grid. It’s in the activity_gridview.xml file
  • setAdapter – we set the adapter that will display the images in the grid

Our custom adapter

This is where we get the view to display a thumbnail image in the grid.

Here’s the code for our custom adapter’s getView() method:

Android Volley GridView Tutorial gridViewActivity GetView

Our grid’s custom adapter’s getView() method is where we get the view and the image

Note the following:

  • view – we’ll use this view to display the thumbnail image in the grid
  • gridViewImageHolder – our ViewHolder class which has one field, an image view
  • convertView is an existing view that we may be able to re-use if it exists
  • if the view doesn’t exist then we create a new view by inflating the grid_image_item.xml layout file
  • we assign the view to our gridViewImageHolder’s image view and then mark it for later identification with setTag()
  • if there is an existing view that we can use, we get it by identifying it by its tag, using getTag() to do so
  • mNetworkImageView – this is our image view which we set to the gridViewImageHolder.imageView
  • setDefaultImageResId – the image that will display during the download
  • setErrorImageResId – the image that will display if there is an error 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 be downloaded and displayed. If the image is in the cache, then it will be displayed immediately. If not then the default image will display. 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 view – the view containing the thumbnail image item is returned for display in the grid

Selecting a thumbnail in the grid

We use the OnItemClickListener interface to listen for when the user selects an item in the grid.

Android Volley GridView Tutorial onClick callback

The callback method, onItemClick() is executed when a grid item is selected

Note the following:

  • setOnItemClickListener – we link the listener to the grid view
  • 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 as an extra in the intent
  • 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.

I hope that you have found this tutorial helpful.

If you need more info on Adapters, have a look at the article, Android Adapters: what are Adapters?

You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.