Over a million developers have joined DZone.

Grid with Images and Checkboxes in Android

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

Today I am going to discuss about creating a Grid in Android having image and associated checkbox. The idea is to have Grid with clickable images and checkbox. When an image is clicked the corresponding checkbox state is toggled.  

It is relatively easy to add custom items to the Grid. But its bit tricky to add clickable images and check/uncheck checkbox on click of the image.

If you want to make the images clickable and check/uncheck the checkbox on image click, that is not that straightforward. In this article, I will take you through the creation of the Grid with clickable images and checkboxes.

Creating a new project

Open Eclipse and create a new android project.

Choose a blank activity for the project.

Create main Grid layout

Open the layout file for the main activity and add a GridView component to it.

android:stretchMode="columnWidth" >

Create Custom layout for grid items

The next step is to create a custom layout that will be used to represent each item of the grid. Here we will define a custom layout using an ImageView and CheckBox android components.

Create a new layout file named griditem.xml and add ImageView and CheckBox components to it as shown below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:visibility="visible" />
Adding Images to project

For this sample project I am adding images to the project itself for use in the grid. But you can source those from database or any other content provider supported by android. In Android project there are few drawable-* folders under res folder. These are used for storing various resources used by the project.  We can put images in any of these folders and Android SDK will copy them to other folders. If you have different images for different resolutions you can copy them to respective folders and correct image would be picked up based on the device resolution.

Another option is to create a drawable folder under res and add images there. These will be copied to all drawable-* folders. We will use this approach here.

Create custom adapter

The next important step is to create a custom adapter which uses custom layout that we defined earlier to add items to the grid. The custom adapter should extend the BaseAdapter. The getView()method of the adapter is invoked for each item of the grid. In this method we assign values to the ImageView and checkbox. The listeners on the custom grid items are added here only. The code for getView() looks like the following:

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;        

if (convertView == null) {               
holder = new ViewHolder(); 

convertView = mInflater.inflate(                       
R.layout.griditems, null);               
holder.imageview = (ImageView) convertView.findViewById(R.id.grid_item_image);               
holder.checkbox = (CheckBox) convertView.findViewById(R.id.grid_item_checkbox);                

else {               
holder = (ViewHolder) convertView.getTag();           
holder.checkbox.setOnClickListener(new OnClickListener() {                
public void onClick(View v) {                   

CheckBox cb = (CheckBox) v;                   
int id = cb.getId();                   

if (thumbnailsselection[id]){                       
thumbnailsselection[id] = false;                   
} else {                       
thumbnailsselection[id] = true;                   

holder.imageview.setOnClickListener(new ImageClickListener(context, holder,thumbnailsselection));
holder.id = position;           
return convertView; 

Here we are saving the state of checkboxes in an array, thumbnailsselection. Since checkboxes are being added dynamically and there is no unique identifier for them, this will help in identifying the current state of checkbox whose state has to be toggled when an image is clicked.  For the same reason we need to create a separate ImageClickListener. As we cannot identify the checkbox on click of corresponding image, we have to create the separate listener which holds the reference to holder class. Using this holder instance we can check/uncheck the checkbox when a corresponding image is clicked. Sometimes when you click on the image, the ImageClickListener is not invoked. The reason for this is that the checkbox overrides the focus event of container grid. Hence checkbox takes the focus when any item of the grid is clicked. To solve this issue you need to add the following properties to the checkbox.



  1. Image icons source: http://www.iconarchive.com
  2. http://developer.android.com/

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

java,mobile,android,images,checkbox,grid layout,clickable images,custome adapter,custom adapter

Published at DZone with permission of Davinder Singla. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}