What you will learn: How to create a list of items with Checkboxes

Difficulty: 2.0 / 5


What it will look like:


Description:
This tutorial grew from another tutorial here which dealt with making lists with icons attached to each list item. (IconifiedTextView tutorial).

1. In order to make a List which includes checkboxes, we need to modify a few things. In CheckBoxifiedText.java, we made a String to hold the text of our list item. We also need a boolean value to keep track of the status of the checkbox (checked = true, unchecked = false). The constructor will initialize the checkbox to be checked or unchecked.



2. Second, we need to look at CheckboxifiedTextViewAdapter.java. We need to add code to support our checkbox. (src.getChecked() will tell us whether our box is checked or not.



We also want to add some methods for doing things like getting the state of the checkbox, or selecting all the items.



3. Open up CheckBoxifiedTextView.java. We need to set up where we want the checkbox to be located, the text location, and whether the box is checked or not.




4. Finally, we can look at our ListActivity code which will be using the classes we just made. In the attached source code, this is the Checkbox.java file. For this example, i am using an array of strings which contain the text we want in each list item. We create a checkboxlist adapter, cbla, first.

Then, we loop through each item in the array and add it to the list adapter (using cbla.addItem()). I am setting all the checkboxes to initially be unchecked by passing the value of FALSE.




Thats pretty much it. Not much work! Attached are all the source files you will need for this tutorial. I have also added functions such as select all, and deselect all which will come in handy.

Enjoy,
Daniel

Thank you daniel
Will be usefull to a lot of users

Best Regards,
plusminus

I downloaded the file but when I run it, there's a
java.lang.runtimeException: Your content must have a LIstView whose id attribute is 'android.R.id.list'.
how do I fix it?

bluefloyd8 wrote:

Checkbox Text List :: Extension of Iconified Text tutorial

What you will learn: How to create a list of items with Checkboxes

Difficulty: 2.0 / 5


What it will look like:

Description:
This tutorial grew from another tutorial here which dealt with making lists with icons attached to each list item. (IconifiedTextView tutorial).

1. In order to make a List which includes checkboxes, we need to modify a few things. In CheckBoxifiedText.java, we made a String to hold the text of our list item. We also need a boolean value to keep track of the status of the checkbox (checked = true, unchecked = false). The constructor will initialize the checkbox to be checked or unchecked.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. public class CheckBoxifiedText implements Comparable<CheckBoxifiedText>{
2.    
3.      private String mText = "";
4.      private boolean mChecked;    
5.      public CheckBoxifiedText(String text, boolean checked) {
6.          /* constructor */
7.           mText = text;
8.           mChecked = checked;
9.      }

Parsed in 0.036 seconds, using GeSHi 1.0.8.4

2. Second, we need to look at CheckboxifiedTextViewAdapter.java. We need to add code to support our checkbox. (src.getChecked() will tell us whether our box is checked or not.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1.      public View getView(int position, View convertView, ViewGroup parent){
2.           CheckBoxifiedTextView btv;
3.           if (convertView == null) {
4.                btv = new CheckBoxifiedTextView(mContext, mItems.get(position));
5.           } else { // Reuse/Overwrite the View passed
6.                // We are assuming(!) that it is castable!
7.                    CheckBoxifiedText src = mItems.get(position);
8.                btv = (CheckBoxifiedTextView) convertView;
9.                btv.setCheckBoxState(src.getChecked());
10.                btv = (CheckBoxifiedTextView) convertView;
11.                btv.setText(mItems.get(position).getText());
12.           }
13.           return btv;
14.      }

Parsed in 0.038 seconds, using GeSHi 1.0.8.4

We also want to add some methods for doing things like getting the state of the checkbox, or selecting all the items.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1.      public void selectAll(){
2.          for(CheckBoxifiedText cboxtxt: mItems)
3.               cboxtxt.setChecked(true);
4.          /* Things have changed, do a redraw. */
5.          this.notifyDataSetInvalidated();
6.      }

Parsed in 0.036 seconds, using GeSHi 1.0.8.4

3. Open up CheckBoxifiedTextView.java. We need to set up where we want the checkbox to be located, the text location, and whether the box is checked or not.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. public CheckBoxifiedTextView(Context context, CheckBoxifiedText aCheckBoxifiedText) {
2.           super(context);
3.  
4.           /* First CheckBox and the Text to the right (horizontal),
5.            * not above and below (vertical) */
6.           this.setOrientation(HORIZONTAL);
7.           mCheckBoxText = aCheckBoxifiedText;
8.           mCheckBox = new CheckBox(context);
9.           mCheckBox.setPadding(0, 0, 20, 0); // 5px to the right
10.          
11.           /* Set the initial state of the checkbox. */
12.           mCheckBox.setChecked(aCheckBoxifiedText.getChecked());
13.          
14.          
15.           /* At first, add the CheckBox to ourself
16.            * (! we are extending LinearLayout) */
17.           addView(mCheckBox,  new LinearLayout.LayoutParams(
18.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
19.          
20.           mText = new TextView(context);
21.           mText.setText(aCheckBoxifiedText.getText());
22.           //mText.setPadding(0, 0, 15, 0);
23.           addView(mText, new LinearLayout.LayoutParams(
24.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
25.      }

Parsed in 0.039 seconds, using GeSHi 1.0.8.4

4. Finally, we can look at our ListActivity code which will be using the classes we just made. In the attached source code, this is the Checkbox.java file. For this example, i am using an array of strings which contain the text we want in each list item. We create a checkboxlist adapter, cbla, first.

Then, we loop through each item in the array and add it to the list adapter (using cbla.addItem()). I am setting all the checkboxes to initially be unchecked by passing the value of FALSE.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. public class Checkbox extends ListActivity {
2.     /** Called when the activity is first created. */
3.        
4.         private CheckBoxifiedTextListAdapter cbla;
5.         // Create CheckBox List Adapter, cbla
6.         private String[] items = {"Box 1", "Box 2", "Box 3", "Box 4"};
7.         // Array of string we want to display in our list
8.  
9.     @Override
10.     public void onCreate(Bundle icicle) {
11.         super.onCreate(icicle);
12.         setContentView(R.layout.main);
13.        
14.         cbla = new CheckBoxifiedTextListAdapter(this);
15.         for(int k=0; k<items.length; k++)
16.         {
17.                 cbla.addItem(new CheckBoxifiedText(items[k], false));
18.         }  
19.         // Display it
20.         setListAdapter(cbla);
21.     }
22. }

Parsed in 0.047 seconds, using GeSHi 1.0.8.4

Thats pretty much it. Not much work! Attached are all the source files you will need for this tutorial. I have also added functions such as select all, and deselect all which will come in handy.

Enjoy,
Daniel

Hey folks, do you know how can I put three elements arranged like a table, lets say a picture, a three line text and a button, inside a listview row?

thx in advance, Gustavo.

Hi,

Thanks for such a nice program.

Now i want to now how to get text of all selected items in my array.

And also i want to display resized image with the checkbox.

Also i want to add "OK" button at the end of List.



So please tell me how to do.


Thanks again.

Hey Guys,

I found this to be a great tutorial, but i was wondering where i can add some code to handle the onclick of the row or checkbox? Just a push in the right direction would be great.

Many Thanks

hockie53 wrote:Hey Guys,

I found this to be a great tutorial, but i was wondering where i can add some code to handle the onclick of the row or checkbox? Just a push in the right direction would be great.

Many Thanks

Hey I think i figured it out, I added an OnClickListener to the checkbox in the CheckBoxifiedTextView you think thats ok?

In main.xml you need to change the id of the ListView to

android:id="@android:id/android:list"

great! everything "works" if you have a small list but if list is long and you check few items and scroll down and then go back checkboxes are not checked anymore... how to solve this issue?

same problem ... please help :'(

hockie53 wrote:Hey Guys,

I found this to be a great tutorial, but i was wondering where i can add some code to handle the onclick of the row or checkbox? Just a push in the right direction would be great.

Many Thanks

Hey I think i figured it out, I added an OnClickListener to the checkbox in the CheckBoxifiedTextView you think thats ok?[/quote]

The onlick should be added into the TextView so when you click the text the checkbox toggles:



Just add some toogle functionality:



But there is still one thing left, when the user navigates using the direction keys and that selects an item it should be toggled too.

Androman wrote:great! everything "works" if you have a small list but if list is long and you check few items and scroll down and then go back checkboxes are not checked anymore... how to solve this issue?

If you use my code you will see that when clicking on the text view the state of the checkbox is not lost while you scroll. So to fix this issue when clicking directly on the checkbox you can do the same:



Also I noticed that in the base tut the 'setCheckBoxState' call is buggy, so in my previus post I fixed it.

Cheers

Hi

I want to make alist images from gallary with thump nails and checkbox . I have tried a lot with your posted code .
I got it in emulator but didnt work on my LG620 phone . could any body have such experiance please help me .

After the OnCreate() method of the Checkbox class, I made a static method called getCbla() where it would return the checkboxifiedlistadapter. I passed a reference to another class by called Checkbox.getCbla() and it recognized all the different titles of the checkboxes when i called for instance

Code: Select all

Checkbox.getCbla().getItem(0).getText().equalsIgnoreCase("Restaurants")

returned true.


However when I request the state of the checkbox, its always false (the initiated value) regardless of whether or not the box is checked. So I'm wondering how I can successfully pass the state of each checkbox to another class. Any help would be muchappreciated!

Thanks to your wonderful tutorial , i made the following....

first is a couple of text view
second is icon with text view

What i wan to do is to combine both together.
They cannot be made in the same custom textfield as the orientation of the first is vertical whilst the orientation of the second is horizontal.

Does anyone know how to make something like this????
I am not asking for answers, but hoping that some one can enlighten me as to the way to do it.