Tutorial 9 : Android List View Example

Now we will learn the most common XML layout, ListView to apply in our Android application. List View is a layout which able to let you arrange components in vertical scrollable list.

In this tutorial, we will show you two examples of List View. One is normal list view and another is with array adapter. Let's see what are the differences between them at below.

1. Normal ListView

First of all, we need to create a new XML layout for ListView activity. In this layout, we will create a normal list view which is only contain text. The XML source code is shown in Figure 9.1. 

<?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="20sp" >
</TextView>

Figure 9.1

After that, we need to change our class extends to ListActivity from Activity. Next, implement a ListAdapter into our class (*.java) to plug-in all the elements in the list we wanted to show. Now, we would like to list out all the months of a year (e.g. January to December) in the ListView layout.

Follow by that, we would like to implement OnItemClickListener method to do some actions when there is a click on it. For example, show the text which is been clicked.

static final String[] MONTHS = new String[] { "January", "February", "March",
            "April", "May", "June", "July", "August",
            "September", "October", "November", "December" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this, R.layout.activity_list_month, MONTHS));

        ListView listView = getListView();
        listView.setTextFilterEnabled(true);

        listView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View view,
                                   int position, long id) {
               // When clicked, show a toast with the TextView text
               Toast.makeText(getApplicationContext(),
               ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
             }
        });

    }

Figure 9.2

After you done it, run the application. It should able to function as the video clip below. If not, you can download my source code at here as your reference.

2. ListView with Array Adapter

In this part, we show you how to create few items in the ListView and use a custom "Array Adapter" to link with the main activity to perform ListView activity in Android application.

Now create a new class for ArrayAdapter and use getView() method to link the image with the text together. The Figure 9.3 show the relevant source code.

<?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"
    android:padding="5sp" >

    <ImageView
        android:id="@+id/logo"
        android:layout_width="30sp"
        android:layout_height="30sp"
        android:layout_marginLeft="5sp"
        android:layout_marginRight="20sp"
        android:layout_marginTop="5sp"
        android:src="@drawable/apple" >
    </ImageView>

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:textSize="20sp" >
    </TextView>

</LinearLayout>

Figure 9.3

Therefore, we can to call this customize ArrayAdapter function from the main program. After complete coding everything which is needed, run the Android application, you should able to see the app can work smoothly as below.

The source code of this tutorial is provided at here, you can download it for your reference if needed. In next tutorial, we will learn about gridView layout. Hopefully, you feel fun with create your own Android application.