Sunday, 8 April 2012

Adding CheckBoxes to a Custom ListView in Android

Adding checkbox to a Custom ListView..sounds simple right?? Add a CheckBox to the layout,inflate,add to the ListView and everything's fine UNTIL you start scrolling!! Try checking a CheckBox and scroll down.You will find many more checked ones down below. Try scrollig up again and you will find even more!!! You will soon realize that the more you scroll,the CheckBoxes get jumbled up even more!! Wondering why?? The troublemaker here is convertView,which the ListView re-uses as you scroll. When you check a CheckBox,every list item that uses that specific convertView will have a checked CheckBox.

So how do you get around this??
Simple.Have a cache which saves the state of every CheckBox in the ListView.
Since a CheckBox can have only two states,checked or unchecked,a simple boolean array
will serve the purpose.

In effect,whenever a CheckBox in the ListView is checked or unchecked,its resulting state is stored in the boolean array.When the user scrolls,this boolean array is used to set the state of the CheckBox.

The CustomAdapter is where we declare the boolean array for holding the CheckBox states.
We also add an onClickListener to the CheckBox. When the user clicks a CheckBox,
if it is checked,then the listener sets the corresponding boolean array to true.Else,it is
set to false.
This boolean array sets the state of the CheckBox using the setChecked(boolean) method.

Note lines 65 and 72.
In line 65,the state of the CheckBox is set to its correct state using the boolean array.
Line 72 alters the boolean array.When the user clicks on a CheckBox,the resulting state of that CheckBox is cached in the boolean array.This cached state is the one that is used to set the CheckBox to its correct state in line 65.

And this is my ListActivity class by the way:

public class CustomListViewWithCheckBox extends ListActivity {
//ArrayList that will hold the original Data
ArrayList<HashMap<String, Object>> players;
LayoutInflater inflater;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//get the LayoutInflater for inflating the customomView
//this will be used in the custom adapter
inflater=(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//these arrays are just the data that
//I'll be using to populate the ArrayList
//You can use our own methods to get the data
String names[]={"Ronaldo","Messi","Torres","Iniesta",
"Drogba","Gerrard","Rooney","Xavi"};
String teams[]={"Real Madrid","Barcelona","Chelsea",
"Barcelona","Chelsea","Liverpool",
"ManU","Barcelona"};
Integer[] photos={R.drawable.cr7,R.drawable.messi,
R.drawable.torres,R.drawable.iniesta,
R.drawable.drogba,R.drawable.gerrard,
R.drawable.rooney,R.drawable.xavi};
players=new ArrayList<HashMap<String,Object>>();
//temporary HashMap for populating the
//Items in the ListView
HashMap<String , Object> temp;
//total number of rows in the ListView
int noOfPlayers=names.length;
//now populate the ArrayList players
for(int i=0;i<noOfPlayers;i++)
{
temp=new HashMap<String, Object>();
temp.put("name", names[i]);
temp.put("team", teams[i]);
temp.put("photo", photos[i]);
//add the row to the ArrayList
players.add(temp);
}
/*create the adapter
*first param-the context
*second param-the id of the layout file
you will be using to fill a row
*third param-the set of values that
will populate the ListView */
final CustomAdapter adapter=new CustomAdapter(this, R.layout.players_layout,players);
//finally,set the adapter to the default ListView
setListAdapter(adapter);
}

This doesn't need any explanation I suppose.If you do,you are always welcome to check outthis post of mine..:).

Note: The setOnItemClickListener() may not fire when a 'clickable' widget like a Button or CheckBox is part of a list item.
To resolve this,simply set
android:focusable="false"
android:focusableInTouchMode="false"
to the clickable widget.

Great stuff! Helped me out a lot. I don't understand how one figures all that out by himself.:D

I don't understand that a workaround like this one is needed to achieve something simple as a checkbox before every item in a list. I have developed an application for Windows Phone 8.0 and you don't have to write any programming-code to achieve it. It can all be done in the layout x(a)ml-file.Anyhow: Thank you very much! Your post has been a great help.

Hi all, there's been several requests for the complete source of this sample.To be frank..I no longer have it :) and I'm too lazy to rebuild this.. :P although this is just elementary level. Besides, the idea was to give a simple solution to the nagging problem of checkboxes within ListViews. I'm pretty sure it has been answered here.