Grid with Images and Checkboxes in Android

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.

<GridView
android:id="@+id/imageGrid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="50dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" >
</GridView>

Create Custom layout for grid items

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/GridItem12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical"
android:paddingBottom="0dp">
<ImageView
android:id="@+id/grid_item_image"
android:layout_width="60dp"
android:layout_height="60dp">
</ImageView>

<CheckBox
android:id="@+id/grid_item_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginTop="30dp"
android:checked="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:visibility="visible" />
</RelativeLayout>

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:

@Override
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);                
convertView.setTag(holder); 

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

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

if (thumbnailsselection[id]){                       
//cb.setChecked(false);                       
thumbnailsselection[id] = false;                   
} else {                       
//cb.setChecked(true);                       
thumbnailsselection[id] = true;                   
}               
}           
});           

holder.imageview.setOnClickListener(new ImageClickListener(context, holder,thumbnailsselection));
holder.imageview.setImageResource(thumbnails[position]);           
holder.checkbox.setChecked(thumbnailsselection[position]);           
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.

android:focusable=“false”
android:focusableInTouchMode=“false”

References

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