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 says:
Looks like the xml files are the same.
Probably some cut’n’paste error….
Anonymous says:
yes, it is a mistake. I updated the layout for one item in Gridview.
All code can be found here:
https://gist.github.com/maxivak/7459045
thank you!
gumuruh s says:
why it create all of the rows become filled?
karthikeyan says:
How Can i open the image in another activity on which the item is selected on gridview
Alok Verma says:
on back press it show a error message
Unfortunately app has stopped
how to solve this?