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.
The downloaded images are displayed in either a ListView or a GridView
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
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.
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:
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:
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:
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.