Using the Universal Image Loader to populate a GridView

Our tutorial app

Our tutorial application displays a grid containing a number of thumbnail images.

Essentially this is the same app as the one in the, GridView tutorial using the Picasso Library where we used the Picasso Library to handle the images. Here we use the Universal Image Loader library to process and load the images from the drawable folder.

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

The Universal Image Loader gets the images out of the drawable folder, resizes and displays it. The images are also cached in memory and on disc. You can also load images from the SD card, the internet, Content Providers and the assets folder

A larger version of the selected thumbnail is loaded from the cache and displays in a new activity

The Application Class

We implement an Application object, MyGridApplication by extending the Application class. This enables us to set up the default configuration for the Universal Image Loader as a Singleton. We can then access the image loader from anywhere in our app.

Setting the default configuration

We set up the image loader’s default configuration in MyGridApplication using this code:

We configure the Universal Image Loader in MyGridApplication

Note the following:

• These are only some of the options that we can set here. There are many more that enable you to fine-tune the image loader. See the UIL documentation for more. You can also modify the settings for displaying the images  when you use the loader in your activities
• threadPriority – sets the priority for the worker threads that will handle the downloading and processing of the images. NORM_PRIORITY is the default priority set for the main thread (with a value of 5). We’re setting the worker thread’s priority to 3 ensuring that the main thread will always take priority and never be blocked. See Processes and Threads
• denyCacheImageMultipleSizesInMemory – you can cache different sizes of the same image. If you set this option to true, then the latest cached image will overwrite the previous one
• diskCacheFileNameGenerator – generates a random name for the disk cache file
• tasksProcessingOrder – sets up the queue for processing tasks for loading and displaying images. The default is FIFO (first-in-first-out), we’re setting it to last-in-first-out (LIFO)
• init – initialises the ImageLoader instance using our configuration. If you want to re-initialise the loader with a new configuration then you must first call destroy() to destroy this instance

The Main Activity

The main activity does all the work. It uses the image loader to get the images, resize and cache them and then display them in a grid.

Our main activity uses the res/layout/activity_main.xml layout file. It contains a GridView which displays the items supplied by the adapter in a two dimensional scrolling grid.

The Grid View

The GridView displays our thumbnail images in a two dimensional scrolling grid.

This is what the XML file looks like:

The GridView element displays the images in a 2-dimensional scrolling array

Note the following:

• columnWidth – the fixed width of each column
• numColumns – the number of columns to display. We’ve set it to auto_fit so that the size of the screen will determine how many columns are displayed
• spacing –the two spacing attributes determine the spacing between the rows and columns
• stretchMode – any empty space is filled by stretching each column equally
• padding – the distance in pixels between the edge of the image and the enclosing view

The images

Our images are stored in the res/drawable-mdpi folder. An Integer array, mThumbIds contains the resource ID’s of these drawables.

Each image is displayed in an image view within the GridView as a thumbnail:

The ImageView displays a thumbnail image in the grid

Note the following:

• the ImageView is in the res/layout/item_grid_image.xml layout file
• width – it will fill the width of one of the grid view’s grid squares
• height – the height is set to 100 pixels
• adjustViewBounds – the size of the view will adjust to keep the aspect ratio of the image (so that it won’t be distorted)
• centerCrop – scales the image, keeping its aspect ratio. Scales from the centre out, cropping any excess so that the image fits in the view

Setting up the Display options

You can set the options which control how the images are displayed. Here’s how we did it:

These are some of the display options that we have chosen to set here

Note the following:

• showImageOnLoading – a placeholder image to display while the images are downloading
• showImageForEmptyUri – the image to show if the uri is empty or null
• showImageOnFail – the image to show if there is an error in decoding/loading the image
• cacheInMemory - whether to load the image in the memory cache
• cacheOnDisk - whether to cache the image on disk
• considerExifParams – whether ImageLoader should consider the EXIF parameters of JPEG images
• bitmapConfig – sets the Bitmap.Config to RGB_565 where each pixel is stored on 2 bytes and only the RGB channels are encoded (lower memory usage)

Hold the view: Our ViewHolder

We create a ViewHolder class which contains one field:

• an image view that will display the thumbnail image for each list item

Our ViewHolder class contains an image view

We’ll use the view holder in our custom adapter when we create and display the grid item views.

Our Custom Adapter

We create a custom ImageAdapter which extends the BaseAdapter class. We use it to create and populate our grid views with the drawables.

Get the view

The getView() method gets and returns the view with the data for the item identified by the position parameter. Here’s the code:

We get a view and display the image identified by position in it. The view is displayed as one of the thumbnails in the grid

Note the following:

• view – the view that will display the thumbnail
• gridViewImageHolder – it’s only field, an image view, will display the thumbnail
• convertView – an existing view that we may be able to recycle
• inflate – we create a new view by inflating the res/layout/item_grid_image.xml layout file
• gridViewImageHolder.imageView – the image view that will display the thumbnail image
• setMaxHeight and setMaxWidth - we set these sizes for the thumbnails. The loader uses these values to decode the images to the required sizes so as to save on memory
• setTag – we mark this view for later identification
• getTag – we get the marked view that we tagged earlier
• imageLoader – our ImageLoader object
• displayImage -  we display the thumbnail image for the item identified by position. We include three parameters:
  • the image uri – we’re using a drawable but you can also load images from the internet, SD card, content provider, and the assets folder
  • the image view that will display the image
  • our display options

Selecting a thumbnail

We use an OnItemClickListener to listen for when the user clicks a thumbnail.

Clicking a thumbnail executes the onItemClick() method where we use an intent to start a new activity. We pass the selected thumbnail’s position to the new activity which uses it to select and display a larger version of the selected thumbnail.

Displaying the selected image: The ActivityTwo Activity

The second activity displays a larger version of the selected thumbnail. Here’s part of the code:

We get the selected thumbnail’s position out of the intent and use it to identify the image to display

Note the following:

• position – the position of the selected thumbnail in the adapter’s data set. It’s the same as the mThumbIds array index and identifies the image that we need to display
• ImageView – the image view in the res/layout/activity_two.xml layout file
• setMaxHeight and setMaxWidth - we set these sizes for the image. The loader uses these values to decode the image to the required size so as to save on memory
• imageLoader - our ImageLoader object
• displayImage -  we display the image for the item identified by position. We include two parameters:
  • the image uri – we’re using a drawable but you can also load images from the internet, SD card, content provider, and the assets folder
  • the image view that will display the image

Including the Universal Image Loader Library in your app

In Android Studio

1. Download the jar file
2. Place it in the libs folder (in your apps folder)
3. Sync project with Gradle files

Place the jar file in the libs folder

Sync the project with Gradle files

 

You can download the jar and read more about the Universal Image Loader here. There is also a great sample project that you can explore to find out more about how to use the Universal Image Loader Library.

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?

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.