Android App Development – Controls Part Three: Android Selection Controls

Android offers selection Controls like

1. List View.
2. Check box.
3. Radio Button.
4. Spinner.
5. GridView.

List View:

ListView represents a list of items that can be selected. It is similar to the ListBox in C#.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />
    <ListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/List"
    />
</LinearLayout>

To populate the list and handle the ItemClick event we can do it like this :

final String [] items=new String[]{"Item1","Item2","Item3","Item4"};
        ArrayAdapter ad=new ArrayAdapter(this,android.R.layout.simple_list_item_1,items);
        list=(ListView)findViewById(R.id.List);
        list.setAdapter(ad);
list.setOnItemClickListener(new OnItemClickListener()
        {

   public void onItemClick(AdapterView arg0, View arg1, int arg2,
     long arg3) {
    // TODO Auto-generated method stub
    TextView txt=(TextView)findViewById(R.id.txt);
    txt.setText(list.getItemAtPosition(arg2).toString());

   }

        }
        );

The above code displays the selected item text in the textview:
The parameters of the OnItemClick method are:

• AdapterView Arg0:the listview, notice that it is of type AdapterView.
• view Arg1: the view that represents the selected item, in this example it will be a TextView
• int Arg2: the position of the selected item.
• long Arg3:: the id of the selected item.

When creating the adapter you can specify the layout of the list by using Android’s built layout resource simple_list_item_1 to display a simple list or by using simple_list_item_single_choice to display radio buttons for single selection:

Or by using simple_list_item_multiple_choice to display check boxes for multiple selection:

You can set the choice mode of the list by using setchoicemode() method:

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
        final String [] items=new String[]{"Item1","Item2","Item3","Item4"};
        ArrayAdapter ad=new ArrayAdapter(this,android.R.layout.simple_list_item_multiple_choice,items);
        setListAdapter(ad);
      ListView list=getListView();
        list.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

    }

Now suppose you want to change the text of the an item when it is clicked, you can do it like this:

list.setOnItemClickListener(new OnItemClickListener()
        {

   public void onItemClick(AdapterView arg0, View arg1, int arg2,
     long arg3) {
    // TODO Auto-generated method stub
    TextView txt=(TextView)findViewById(R.id.txt);
    items[arg2]="changed";
    list.setAdapter(new ArrayAdapter(ListControls.this,android.R.layout.simple_list_item_1,items));

   }

        }
        );

See that you actually change the value of the string array item at the selected position then bind the listview with the adapter again.
You can capture the View object and do what you want in a more neat way:

list.setOnItemClickListener(new OnItemClickListener()
        {

   public void onItemClick(AdapterView arg0, View arg1, int arg2,
     long arg3) {
    // TODO Auto-generated method stub
    TextView temp=(TextView)arg1;
    temp.setText("changed 2");
   }

        }
        );

If the activity will contain just one listview you can create an activity that extends list view. In this case you don’t have to specify a layout as a listview will fill the screen.

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
                final String [] items=new String[]{"Item1","Item2","Item3","Item4"};
        ArrayAdapter ad=new ArrayAdapter(this,android.R.layout.simple_list_item_1,items);
        setListAdapter(ad);

If you want to reference or customize this listview then you can define it in the layouts xml fine by assigning it the id android:id=@android:id/list so that the activity knows which listView is the main list for the activity ..
This example shows a listview and a textview in a layouts xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    android:text="List View Demo"
    />

    <ListView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/list"
    />
</LinearLayout>

Now if you want to customize the ui of each row of the listview you define two layouts files: the first has the layout of the activity and the other has layout of each row in the listview. and pass the reference of the rows xml layout file to the constructor of the adapter that the list view is bound to.

Check Box:

The checkBox has two states: Checked and UnChecked. It inherits from TextView so it has all of its properties:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />
    <CheckBox
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/Chk"
    android:text="This is a check box"
    android:checked="false"

    />
</LinearLayout>

and to handle the check/uncheck events:

CheckBox chk=(CheckBox)findViewById(R.id.Chk);
        chk.setOnCheckedChangeListener(new OnCheckedChangeListener()
        {

   public void onCheckedChanged(CompoundButton arg0, boolean arg1) {
    TextView txt=(TextView)findViewById(R.id.txt);
    if (arg1)
     txt.setText("checked");
    else
     txt.setText("Unchecked");

   }

        }
        );

Radio Button:

Android provides RadioButton control. You create a RadioGroup and add RadioButtons inside it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
    android:id="@+id/txt"
    android:layout_width="fill_parent"
android:layout_height="fill_parent"
    />
   <RadioGroup
   android:id="@+id/group"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Radio Group"
>
<RadioButton android:id="@+id/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item1"
android:checked="true"
 />
<RadioButton android:id="@+id/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item2" />
<RadioButton android:id="@+id/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item3" />
</RadioGroup>
</LinearLayout>

You can get the checked item from code like this:

RadioGroup rg=(RadioGroup)findViewById(R.id.group);
        rg.setOnCheckedChangeListener(new android.widget.RadioGroup.OnCheckedChangeListener()
        {

   public void onCheckedChanged(RadioGroup arg0, int arg1) {
    // TODO Auto-generated method stub
    TextView txt=(TextView)findViewById(R.id.txt);
    RadioButton rb=(RadioButton)findViewById(arg1);
    txt.setText("You selected "+rb.getText());

   }

        }
        );

and this was part one in the selection controls. in the next post we’re going to see the Spinner and the GridView Controls.