Monday, July 18, 2011

Simple ListView Adapter and list item select

When you are using a listview in your applications many a times you will write your own adapter to display items in a listview. But if your list is very simple showing a list of strings, you can use inbuilt adapters like ArrayAdapter, SimpleCursorAdapter etc.

ArrayAdapter
Let us look at an example

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" 

<ListView 
android:layout_height="wrap_content" 
android:id="@+id/listView1" 
android:layout_width="match_parent"
 
android:layout_margin="20dp"
></ListView>
</LinearLayout>

And the oncreate function of activity reads like this

       super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        String []s = new String[]{"Lorem","Ipsum","dolor","sit","amet"};
        ListView lv = (ListView)findViewById(R.id.listView1);
        lv.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,s));

So this arrayadapter just needs the array to be displayed in the list, the context and the textview resource id. Instead of defining another resource id, I have used in built resource. Now our list looks like this

If you want to change the appearance of your list, you can define your own list view as shown.
Add another xml file with just a textview . Do not use any layout.
tv.xml

<TextView android:text="TextView" android:id="@+id/textView1"
android:background="#0489B1"
android:textColor="#000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="20dp"
android:padding="5dp"></TextView>
Now use this as layout in arrayadpter
 lv.setAdapter(new ArrayAdapter<String>(this, R.layout.tv,s));


And after you set the background color of linear layout in main to blue, this is how your list looks like


Next step will be write a listener to the list. You should attach an OnItemClickListener to this listview.

 lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
 ListView lv = (ListView) arg0;
 TextView tv = (TextView) lv.getChildAt(arg2);
 String s = tv.getText().toString();
 Toast.makeText(SamplesActivity.this, "Clicked item is"+s, Toast.LENGTH_LONG).show();
} });
Instead of Toasting, you can perform any required processing. 
What if you want to use the list for selecting one of the items? Again the simplest way to use this is to use android.R.layout.simple_list_item_single_choic

       lv.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_single_choice,s));
        lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);   
Now our list lets us select exactly one item
I did change the background color of linear layout to blue in main.xml because the builtin android layouts show list elements in white text which will be invisible if the background is also white.
How do you find out which item is selected from the listview? 
Let us use a button, on click of which we will display the selected item of the list
Modified main.xml is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#0489B1" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">


<ListView android:layout_height="wrap_content" android:id="@+id/listView1"
android:layout_width="match_parent" android:divider="#00ffffff"
android:dividerHeight="10dp" android:layout_margin="20dp"></ListView>
<Button android:text="OK" android:id="@+id/button1"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal"></Button>
</LinearLayout>


Let us add the button and onclicklistener to it.

        btn =(Button) findViewById(R.id.button1);
        btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int p =  lv.getCheckedItemPosition();
String s = ((TextView) lv.getChildAt(p)).getText().toString(); Toast.makeText(SamplesActivity.this, "Selected item is "+s, Toast.LENGTH_LONG).show();
}
});
So now our list looks like this.




Finally let us see how to select multiple elements from the list. 
First of all change the list mode multiple select


lv.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);


Then we should use lv.setCheckedItemPositions() which returns a sparseboolean array. The array elements are true if that item is selected



btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
SparseBooleanArray sp = lv.getCheckedItemPositions();
StringBuffer str = new StringBuffer();
for(int i=0;i<sp.size();i++){
if(sp.valueAt(i)==true){
String s = ((TextView) lv.getChildAt(i)).getText().toString();
str = str.append(" "+s);
}
}  
Toast.makeText(SamplesActivity.this, "Selected items are "+str.toString(), Toast.LENGTH_LONG).show();
}
});
And, our multi select list is ready!