Showing images in GridView with multiple columns [Android]

 

This post shows how to get GridView with images and show images in multiple columns.

If you are looking for showing images in ListView – read this tutorial.

In this example we will create an activity that will show images of products in columns (using GridView).

The final app will look like this:

 

We will do the following steps (similar as in this tutorial for ListView with images):

– create class to store information about Product

– create main layout file for the activity

– create layout file for rendering one item in GridView

– create custom adapter which extends standard ArrayAdapter<Product>

– make activity show images of products in GridView

We reuse classes defined in previous post for ListView. The code will be very similar except we have a different layout for the activity (GridView instead of ListView) and a slightly different layout for items in the GridView.

 

Data:




Layout for one item in GridView:




Adapter:




Activity layout




GridView will show as many columns as needed to fill the screen. So the number of columns is adjustable to the screen width.

 

Activity Class

 




Find all code for this example on Github Gist or download the full project from Github.

 

 

Note that adapter and GridView are optimized for many items:

– it downloads images from Internet asynchroniously;

– it uses cache for storing images from Internet;

– it doesn’t download images while user scrolls the gridview

Read more about optimization in the previous post.

 

  • oneeyeman

    Looks like the xml files are the same.
    Probably some cut’n’paste error….

  • why it create all of the rows become filled?

  • karthikeyan

    How Can i open the image in another activity on which the item is selected on gridview

  • Alok Verma

    on back press it show a error message

    Unfortunately app has stopped

    how to solve this?