Using ListView in Android Application
Android provides the
view
ListView which is capable of displaying a scrollable list of items. ListView gets
the data to display via an adapter. An adapter which must extend
BaseAdapter and is responsible for
providing the data model for the list and for converting the data into the
fields of the list.
We can extend the activity
ListActivity which simplifies the
handling of a ListView. ListActivity
extends Activity and provides
simplified handling of lists. For example you have a predefine method if someone
clicks on a list element.
ListActivity contains a
ListAdapter which is responsible for
managing the data. This adapter must be set in the
onCreate() method of your Activity via the method
setListAdapter().
If the user select in the list a list entry the method
onListItemClick() will be called.
This method allows accessing the selected element.
In this article, I am going create
a scrollable list of student names that are read from a string array. When a
list item is selected, a toast message will display the name of the item in the
list.
Create a
project
Start a new project named
ListViewDemo.
Open the main.xml file inside
the res/layout/. Insert the
following:
<?xml
version="1.0"
encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp">
</TextView>
This file defines the layout for
each item that will be placed in the
ListView.
Open the strings.xml file inside
the res/values/. Insert the
following:
<?xml
version="1.0"
encoding="utf-8"?>
<resources>
<string name="hello">Hello World, ListViewDemoActivity!</string>
<string name="app_name">ListViewDemo</string>
<string-array name="students_name">
<item>Rohit</item>
<item>Rati</item>
<item>Amit</item>
<item>Arun</item>
<item>Sapna</item>
<item>Sounak</item>
<item>Anil</item>
<item>Kashif</item>
</string-array>
</resources>
Open the
ListViewDemoActivity.java and make the class extend
ListActivity instead of
Activity. Insert the following code:
import
android.app.ListActivity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.Toast;
public
class
ListViewDemoActivity
extends ListActivity {
@Override
public
void onCreate(Bundle
savedInstanceState)
{
super.onCreate(savedInstanceState);
String[] students = getResources().getStringArray(R.array.students_name);
setListAdapter(new
ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,students));
}
/** Called when the
listview item is selected. */
protected
void
onListItemClick(ListView l,View v,int position,long id)
{
Object o =
this.getListAdapter().getItem(position);
String
keyword = o.toString();
Toast.makeText(this,
"You selected:
" +
keyword, Toast.LENGTH_LONG).show();
}
}
The
setListAdapter(ListAdapter) automatically adds a
ListView to fill the
entire screen of the
ListActivity. This method
takes an
ArrayAdapter, which manages the array of list items
that will be placed into the
ListView.
The onListItemClick(ListView, View,
int, long) called when user select any item from the ListView and displays
the selected item name.
Run the application.
You can scroll the list, then click an item
to see a message. You should see something like this:
After creating ListView with simple layout, create a ListView with its own
layout:
Create the following layout file "mylayout.xml"
in the res/layout folder of your
project:
<?xml
version="1.0"
encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="@+id/icon"
android:layout_height="wrap_content"
android:src="@drawable/icon"
android:layout_width="22px"
android:layout_marginTop="4px"
android:layout_marginRight="4px"
android:layout_marginLeft="4px">
</ImageView>
<TextView android:text="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/label"
android:layout_marginTop="20px"
android:layout_marginLeft="4px"
android:textSize="30px">
</TextView></LinearLayout>
Change your activity "ListViewDemoActivity"
to the following. This is almost the same coding as in the previous example, the
only difference is that we are using our own layout in the ArrayAdapter and
telling the adapter which UI element should contain the text.
import
android.app.ListActivity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.Toast;
public
class
ListViewDemoActivity
extends ListActivity {
/** Called when the activity is first created. */
@Override
public
void onCreate(Bundle
savedInstanceState)
{
super.onCreate(savedInstanceState);
String[] students = getResources().getStringArray(R.array.students_name);
setListAdapter(new
ArrayAdapter<String>(this,R.layout.mylayout,R.id.label,students));
}
protected
void
onListItemClick(ListView l,View v,int position,long id)
{
Object o =
this.getListAdapter().getItem(position);
String
keyword = o.toString();
Toast.makeText(this,
"You selected:
" +
keyword, Toast.LENGTH_LONG).show();
}
}
Now the output looks like below:
