How to create a dynamic list of checkboxes in Android, part 1

A brief introduction…

The first app that I developed with Android was very simple and the screen that I started with, had a search function. The user could search food stores near a city, selecting the desired type of food. This screen was fairly simple, with these input elements: a city spinner, a group of checkboxes for the food types, and a search button. As simple as it seems, when you are a total newbie to the technology, is difficult to get started.

So my first decision was to tackle only the layout and the user interface at first, with no worries about the source of the data or the search function in the beginning. This lead me to quickly create these two string arrays in strings.xml, just to test the UI of the activity.

01
<string-array name="cities">
02
    <item>Mar del Plata</item>
03
    <item>Buenos Aires</item>
04
</string-array>
05
<string-array name="foodTypes">
06
    <item>Pasta</item>
07
    <item>Pie</item>
08
    <item>Pizza</item>
09
    <item>Grill</item>
10
    <item>Sea Food</item>
11
    <item>Salads</item>
12
    <item>Desserts</item>
13
    <item>Quick Meals</item>
14
</string-array>

Great! Now to the code that would make these items into the UI elements… The spinner was quite straightforward, the layout element in the layout.xml file is (I’m using RelativeLayout, but i’m showing only the spinner):

1
<Spinner android:id="@+id/cities_spinner"
2
    android:layout_width="fill_parent"
3
    android:layout_height="wrap_content" 
4
    android:layout_below="@id/cities_label"
5
    />

And inside the onCreate method of my activity:

1
//create spinner with cities
2
Spinner spinner = (Spinner) findViewById(R.id.cities_spinner);
3
// Create an ArrayAdapter using the string array and a default spinner layout
4
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
5
    R.array.cities, android.R.layout.simple_spinner_item);
6
// Specify the layout to use when the list of choices appears
7
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
8
spinner.setAdapter(adapter);

What’s the logic behind all this code?

First, you need to get the spinner that’s defined in your activity layout file, and to do that in execution time, you could use the findViewById method.

Then, you need a way to load all your string array items into the spinner, and you do exactly that, using an adapter. An adapter is a mediator between the UI element (the spinner in this case), and a source of data (the string array in this example), and is responsible for creating a UI representation of each element of the source data (creating a View object for each one). In this example I used an ArrayAdapter, that is an Android predefined subclass that helps with source data inside arrays. The interesting part here, is that you specify the way you want the elements to display in the spinner, using setDropDownViewResource method from the Adapter. The parameter passed to this method it’s an Android predefined element to show a text as a spinner item.

At last, you set this adapter to your spinner, an is done! Your spinner now shows all the items in the string array that was defined in the strings.xml file.

And now, let’s tackle the checkboxes

Ok, so lets go down to business… this post was about a dynamic list of checkboxes, or not?

I’m sorry for that introduction into spinners, but being this app my first one, I thought it couldn’t be so much complicated to tackle the checkboxes part. It should be quite similar to the city spinner. And it was… at the end. But I got stuck trying to solve this. There are a lot of questions and examples drifting around this issue on the net, and I got confused. So I included that part as an introduction, and as a way to compare the little differences between the spinner and the checkboxes examples.

Remember that my task here was pretty simple, showing a string array as a list of checkboxes that the user could check and uncheck. And here is how I got that running. For the layout, I defined a GridView element, like this:

1
<GridView android:id="@+id/foodtype_list"
2
        android:layout_width="fill_parent"
3
        android:layout_height="wrap_content"
4
        android:numColumns="auto_fit"
5
        android:choiceMode="multipleChoice"
6
        android:layout_below="@id/foodtype_label"        
7
        ></GridView>

And inside the onCreate method of my activity, just under the spinner code, I wrote this:

1
//create checkboxes from string array for the food types
2
String[] foodTypes = getResources().getStringArray(R.array.foodTypes); 
3
ArrayAdapter<String> adapter2 = new ArrayAdapter<String>(this,
4
    android.R.layout.simple_list_item_multiple_choice, foodTypes);
5
GridView gridView = (GridView) findViewById(R.id.foodtype_list);
6
gridView.setAdapter(adapter2);
7
for (int i = 0; i < adapter2.getCount(); i++) {
8
    gridView.setItemChecked(i, true);
9
}

Yes, I know, it’s basically the same thing as with the spinner. But that’s the point here. You create an adapter from the string array, and define it to use another Android predefined element as layout template. In this case, I did this in the constructor directly.

The for block is just to always set all the checkboxes into checked state.

This is not a finished activity, just the first draft of one screen. I’ll be posting updates on this example to show how to evolve this simple and “hardcoded” activity into one that loads the cities and food types from storage, and can get the selections made by the user.

4 thoughts on “How to create a dynamic list of checkboxes in Android, part 1

  1. nd

    This is really an eye opener..it’s much better than adding checkbox view programmatically…
    by the way is there a part 2?
    thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *