Android ListView Tutorial

By - Javatechig.com

Android ListView Tutorial

Table of Contents

1. What is Adapter? 2. Building ListView using ArrayAdapter 3. Building ListView using Custom Adapter 3.1. Create your custom row layout 3.2. Writing a custom adapter 3.3. Putting it all together 3.4. Output 4. Customizing ListView 4.1. Change ListView selection colour in Android 5. How to change the divider color in the ListView? 5.1. Changing ListView divider color and height 5.2. Using a drawable for ListView divider 5.3. Changing ListView divider color pragmatically 6. References

This post will walk you through Android ListView Tutorial for building simple and customized ListView using different Android adapters. List is one of the most common UI patterns, which is being used extensively to display the collection of data elements in rows. In android ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array.

1. What is Adapter?
Adapter is basically bridge between UI components and the data source that fill data into UI Component. Adapter is used to supply the data to like spinner, list view, grid view etc. For example, we can create a list view from xml layout without data, and using adapter we can supply data sets to list view.

If you look at the above images you will certainly get an idea of list view. This kind of customizable list views can be done using an adapter.

2. Building ListView using ArrayAdapter

This is the simplest way we can create a simple default styled list view from array of elements. To do this there are three things to concentrate,

1. 2.

Find out what data you want to display in list: For our example, I am considered taking a static array of strings. But for complex scenarios it can be a response from server, or data fetched from database. Declare the list view object in your xml layout: ListView is the user interface element we are using to represent data to user. So in my example, the layout contains a list view. Make sure you provide an appropriate id. Now finally, feed the list view with the data sets: For this we use adapters. We can always customize our adapter, but for to start lets make it simple. I am using Array adapter class available in android.

3.

Here is how my layout file looks like

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".ListActivity" > <ListView android:id="@+id/months_list" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout>

ListActivity.java
?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

package com.javatechig.droid.ui; import import import import android.os.Bundle; android.app.Activity; android.widget.ArrayAdapter; android.widget.ListView;

public class ListActivity extends Activity { // Initialize the array String[] monthsArray = { "JAN", "FEB", "MAR", "APR", "MAY", "JUNE", "JULY", "AUG", "SEPT", "OCT", "NOV", "DEC" }; // Declare the UI components private ListView monthsListView;

18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

private ArrayAdapter arrayAdapter; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list); // Initialize the UI components monthsListView = (ListView) findViewById(R.id.months_list); // For this moment, you have ListView where you can display a list. // But how can we put this data set to the list? // This is where you need an Adapter // context - The current context. // resource - The resource ID for a layout file containing a layout // to use when instantiating views. // From the third parameter, you plugged the data set to adapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, monthsArray); // By using setAdapter method, you plugged the ListView with adapter monthsListView.setAdapter(arrayAdapter); } }

Output of the above code is

3. Building ListView using Custom Adapter

If you have followed my previous example, then you are ready with a simple list which using ArrayAdapter. Now its the time to create something fancy. In this section of tutorial, you will find steps to customize a list using custom adapters.

In this above example I am displaying a new list items. Below is my NewsItem object

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

public class NewsItem { private String headline; private String reporterName; private String date; public String getHeadline() { return headline; } public void setHeadline(String headline) { this.headline = headline; } public String getReporterName() { return reporterName; } public void setReporterName(String reporterName) { this.reporterName = reporterName; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } @Override public String toString() { return "[ headline=" + headline + ", reporter Name=" + reporterName + " , date=" + date + "]"; } }

3.1. Create your custom row layout

I have created a simple layout as shown in the image below, which holds news headline, reported name and date. list_row_layout.xml
?

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="50dp" android:orientation="horizontal"

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

android:padding="5dip" > <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:textStyle="bold" android:typeface="sans" /> <TextView android:id="@+id/reporter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/title" android:layout_marginTop="5dip" android:text="" android:textColor="#343434" android:textSize="12sp" /> <TextView android:id="@+id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/reporter" android:layout_alignBottom="@+id/reporter" android:layout_alignParentRight="true" android:text="" android:textColor="#343434" android:textSize="12sp" /> </RelativeLayout>

3.2. Writing a custom adapter

CustomListAdapter.java
?

1 2 3 4 5 6 7 8 9 10 11

public class CustomListAdapter extends BaseAdapter { private ArrayList listData; private LayoutInflater layoutInflater; public CustomListAdapter(Context context, ArrayList listData) { this.listData = listData; layoutInflater = LayoutInflater.from(context); } @Override public int getCount() {

12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

return listData.size(); } @Override public Object getItem(int position) { return listData.get(position); } @Override public long getItemId(int position) { return position; } public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = layoutInflater.inflate(R.layout.list_row_layout, null); holder = new ViewHolder(); holder.headlineView = (TextView) convertView.findViewById(R.id.title); holder.reporterNameView = (TextView) convertView.findViewById(R.id.reporter); holder.reportedDateView = (TextView) convertView.findViewById(R.id.date); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.headlineView.setText(listData.get(position).getHeadline()); holder.reporterNameView.setText("By, " + listData.get(position).getReporterName()); holder.reportedDateView.setText(listData.get(position).getDate()); return convertView; } static class ViewHolder { TextView headlineView; TextView reporterNameView; TextView reportedDateView; } }

3.3. Putting it all together

Now we are ready with adapter and layout. Lets put all of them together and build a custom list.

activity_main.xml : This is my main activity layout. For making this example simpler, I just have a ListView inside a LinearLayout.
?

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/custom_list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:dividerHeight="1dp" /> </LinearLayout>

Here my activity class MainActivity.java where I am initializing list view and adapter
?

1 public class MainActivity extends Activity { 2 @Override 3 public void onCreate(Bundle savedInstanceState) { 4 super.onCreate(savedInstanceState); 5 setContentView(R.layout.activity_main); 6 ArrayList image_details = getListData(); 7 final ListView lv1 = (ListView) findViewById(R.id.custom_list); 8 lv1.setAdapter(new CustomListAdapter(this, image_details)); 9 lv1.setOnItemClickListener(new OnItemClickListener() { 10 11 @Override 12 public void onItemClick(AdapterView<?> a, View v, int position, long id) { 13 Object o = lv1.getItemAtPosition(position); 14 NewsItem newsData = (NewsItem) o; 15 Toast.makeText(MainActivity.this, "Selected :" + " " + newsData, 16 Toast.LENGTH_LONG).show(); } 17 18 }); 19 20 } 21 22 private ArrayList getListData() { 23 ArrayList results = new ArrayList(); 24 NewsItem newsData = new NewsItem(); newsData.setHeadline("Dance of Democracy"); 25 newsData.setReporterName("Pankaj Gupta"); 26 newsData.setDate("May 26, 2013, 13:35"); 27 results.add(newsData);

28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

newsData = new NewsItem(); newsData.setHeadline("Major Naxal attacks in the past"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("BCCI suspends Gurunath pending inquiry "); newsData.setReporterName("Rajiv Chandan"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("Life convict can`t claim freedom after 14 yrs: SC"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("Indian Army refuses to share info on soldiers mutilated at LoC"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("French soldier stabbed; link to Woolwich attack being probed"); newsData.setReporterName("Sudeep Nanda"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); return results; } }

3.4. Output

4. Customizing ListView

Read More from JAVATECHIG.COM