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:
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.
The downloaded images are displayed as thumbnail images in a grid
In the beginning
Here’s the first bit of code:
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:
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.
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 
Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.