Using the Picasso Library to load images into a GridView

Our Tutorial app

We’re using the Picasso Library to take care of resizing, caching and loading our images. It’s free and Open Source.

Have a look at Loading the Picasso Library into your app build if you need help loading the library into your Android Studio project.

Check out the Picasso website for more on the Picasso Library.

If you haven’t already done so, have a look at our ListView tutorial where we use Picasso: Using Bitmaps efficiently.

Our tutorial app loads a number of images stored in the res/raw folder into a grid view. Selecting a grid item displays a larger version of that image.

We use the Picasso Library to take care of the image processing.

Picasso resizes the images, saves them in a memory and disc cache, loads the grid and takes care of view recycling.

A place holder image displays as the images are loaded from the res/raw folder

Changing orientation loads the images from the cache immediately

Selecting an item displays a place holder image as the original is resized, cached and loaded

Once loaded, the image is loaded instantly from the cache if selected again

Change orientation and the image loads immediately from the cache

The MainActivity activity

Our tutorial is based on the one in the Official documentation, with a couple of tweaks.

The main activity displays the grid view and handles item selection.

The layout file

The activity’s layout has a single GridView element. It displays a two-dimensional scrolling grid. This is what the xml file looks like:

Our GridView ViewGroup is defined in the res/layout/activity_main.xml file

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

The images

We’ve loaded a couple of images in the res/raw folder. Then we create an array of Integers representing the resource IDs of the images. We’ll use the IDs to select the images.

Our custom adapter

We use a custom adapter to load the images into the grid.

Here’s the main part of our custom adapter’s code:

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

Note the following:

• the parameters:
  • position – the image’s position in the adapter (we can also use it as an index to our mThumbIds array)
  • convertView – an old view that we may be able to recycle
  • parent – this is the grid view into which we place this image view
• ImageView – the image view that we return to display in one of the grid’s cells. We check if we can re-use the convertView. If not, we create a new image view
• Picasso – we’re using the Picasso Library
• with – the context of the Picasso instance
• load – the image that we want to load into the grid cell
• placeholder – a placeholder image that’s displayed while the required image is loaded
• error – an image that displays if the requested image can’t be loaded
• noFade – by default, the image fades in if loaded from the disc cache or from the network. We’ve disabled the fade-in
• centerCrop – crops the image so it fits inside our dimensions
• into – asynchronously loads the image into this image view

The listener

We use a listener to listen for when the user selects a grid image. Here’s the code:

Selecting an image, triggers the onItemClick() method. This starts the activity that displays a larger version of the selected image

Note the following:

• we create an Intent which we use to start the second activity
• putExtra – we put the selected item’s position in the adapter into the intent. We’ll use it in the second activity to get the image
• startActivity – starts the second activity

The second activity

We have a second activity that displays a larger version of the selected image. It receives the position of the selected image in the adapter as an intent extra. We’ll use this as the index of the image in the mThumbIds array.

The layout

The activity’s layout contains an image view where we display the image.

Displaying the full image

We use the position value as an index to get the image that we want to display out of the array. Then we use Picasso to do the rest and display the image:

We use Picasso to take care of resizing and loading the image into the image view

Note the following:

• we use an if statement to check if we received the position value passed on from the main activity. If we didn’t, then we use the default -1 value and display the big_problem image
• if we received the position value, then we display the image identified in the mThumbIds array by the index, position
• resize – we want an image of 800 x 800 pixels to display

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.

You can download the project files here