Checkbox Text List :: Extension of Iconified Text tutorial

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Checkbox Text List :: Extension of Iconified Text tutorial

Postby bluefloyd8 » Sat Feb 02, 2008 11:56 pm

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:
Image


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 ]
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.031 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 ]
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.033 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 ]
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.034 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 ]
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.038 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 ]
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.038 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
Attachments
Files.zip
(5.73 KiB) Downloaded 3802 times
User avatar
bluefloyd8
Experienced Developer
Experienced Developer
 
Posts: 70
Joined: Tue Jan 22, 2008 3:57 am
Location: Indiana, USA

Top

Postby plusminus » Sun Feb 03, 2008 12:50 am

Thank you daniel :)
Will be usefull to a lot of users :!:

Best Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Re: Checkbox Text List :: Extension of Iconified Text tutor

Postby a » Fri Mar 28, 2008 8:59 pm

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:
Image


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 ]
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 ]
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 ]
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 ]
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 ]
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.038 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
a
Freshman
Freshman
 
Posts: 2
Joined: Thu Mar 27, 2008 5:01 pm

ListView with two columns

Postby gustavo » Sun Mar 30, 2008 5:13 am

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.
gustavo
Junior Developer
Junior Developer
 
Posts: 12
Joined: Sun Mar 02, 2008 2:55 pm

how to get text of selected items

Postby Niketa » Wed Sep 24, 2008 1:55 pm

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.
Niketa
Developer
Developer
 
Posts: 36
Joined: Wed Sep 17, 2008 12:37 pm

Adding on click listener

Postby hockie53 » Mon Jan 19, 2009 4:15 pm

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
Freshman
Freshman
 
Posts: 2
Joined: Mon Jan 19, 2009 4:11 pm

Top

Re: Adding on click listener

Postby hockie53 » Mon Jan 19, 2009 9:18 pm

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?
hockie53
Freshman
Freshman
 
Posts: 2
Joined: Mon Jan 19, 2009 4:11 pm

Postby johnhunsley » Thu Feb 05, 2009 1:34 pm

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

android:id="@android:id/android:list"
johnhunsley
Freshman
Freshman
 
Posts: 8
Joined: Mon Jan 19, 2009 9:30 am

Postby Androman » Fri Mar 13, 2009 12:25 pm

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?
Androman
Once Poster
Once Poster
 
Posts: 1
Joined: Fri Mar 13, 2009 12:20 pm

Postby MickArea » Sun Apr 05, 2009 10:48 pm

same problem ... please help :'(
MickArea
Junior Developer
Junior Developer
 
Posts: 23
Joined: Mon Feb 23, 2009 4:42 pm

Re: Adding on click listener

Postby B_Thax » Fri Apr 10, 2009 8:15 pm

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:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public CheckBoxifiedTextView(Context context, CheckBoxifiedText aCheckBoxifiedText) {
  2. ...
  3.          mText.setOnClickListener( new OnClickListener()
  4.          {
  5.                 /**
  6.                  * Check or uncked the current checkbox!
  7.                  */
  8.                         @Override
  9.                         public void onClick(View v) {
  10.                                 toggleCheckBoxState();
  11.                         }
  12.  
  13.          });
  14. ...
  15. }
  16.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


Just add some toogle functionality:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.     public void toggleCheckBoxState()
  2.     {
  3.         setCheckBoxState(!getCheckBoxState());
  4.     }
  5.    
  6.     public void setCheckBoxState(boolean bool)
  7.     {
  8.         mCheckBox.setChecked(bool);
  9.         mCheckBoxText.setChecked(bool);
  10.     }
  11.    
  12.     public boolean getCheckBoxState()
  13.     {
  14.         return mCheckBox.isChecked();
  15.     }
  16.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


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.
User avatar
B_Thax
Junior Developer
Junior Developer
 
Posts: 13
Joined: Thu Jul 17, 2008 5:55 pm
Location: Palma de Mallorca

Postby B_Thax » Sat Apr 11, 2009 9:50 am

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:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public CheckBoxifiedTextView(Context context, CheckBoxifiedText aCheckBoxifiedText) {
  2.          ...
  3.          mCheckBox.setOnClickListener( new OnClickListener()
  4.          {
  5.                   /**
  6.                   * Check or uncked the current checkbox!
  7.                   */
  8.                   @Override
  9.                   public void onClick(View v) {
  10.                            // Force both the checkbox and our own type to be cehcked or unchecked!
  11.                            // It's not needed to check the box again but reusing our functions is not too bad <img src="http://www.anddev.org/images/smilies/big_smile.png" alt=":D" title="Very Happy" />
  12.                            setCheckBoxState(getCheckBoxState());
  13.                   }
  14.          });
  15.          ...
  16. }
  17.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


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

Cheers
User avatar
B_Thax
Junior Developer
Junior Developer
 
Posts: 13
Joined: Thu Jul 17, 2008 5:55 pm
Location: Palma de Mallorca

Check box with image thump

Postby jithin_mobatia » Wed May 12, 2010 7:43 am

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 .
jithin_mobatia
Once Poster
Once Poster
 
Posts: 1
Joined: Wed May 12, 2010 7:37 am

Re: Checkbox Text List :: Extension of Iconified Text tutor

Postby michaelz » Fri Aug 06, 2010 2:52 am

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!
michaelz
Developer
Developer
 
Posts: 26
Joined: Tue Jun 29, 2010 3:16 am

Re: Checkbox Text List :: Extension of Iconified Text tutor

Postby limteckchai » Wed Aug 25, 2010 9:27 am

Thanks to your wonderful tutorial , i made the following....
omg.PNG
omg.PNG (47.78 KiB) Viewed 24746 times

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.
limteckchai
Experienced Developer
Experienced Developer
 
Posts: 92
Joined: Mon Jun 28, 2010 3:33 am

Top
Next

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 3 guests