Android list view tutorial by Javatechig

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. 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.
2. 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.
3. 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 let’s make it simple. I am using Array adapter class available in android.
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 android.os.Bundle;
import android.app.Activity;
import android.widget.ArrayAdapter;
import 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 it’s
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:text=""
android:textStyle="bold"
android:typeface="sans" />
<TextView
android:id="@+id/reporter"
android:layout_below="@id/title"
android:layout_marginTop="5dip"
android:text=""
android:textColor="#343434"
android:textSize="12sp" />
<TextView
android:id="@+id/date"
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. Let’s 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_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/custom_list"
android:dividerHeight="1dp" />
</LinearLayout>
Here my activity class MainActivity.java where I am initializing list view and adapter
?
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
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList image_details = getListData();
final ListView lv1 = (ListView) findViewById(R.id.custom_list);
lv1.setAdapter(new CustomListAdapter(this, image_details));
lv1.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> a, View v, int position, long
id) {
Object o = lv1.getItemAtPosition(position);
NewsItem newsData = (NewsItem) o;
Toast.makeText(MainActivity.this, "Selected :" + " " + newsData,
Toast.LENGTH_LONG).show();
}
});
}
private ArrayList getListData() {
ArrayList results = new ArrayList();
NewsItem newsData = new NewsItem();
newsData.setHeadline("Dance of Democracy");
newsData.setReporterName("Pankaj Gupta");
newsData.setDate("May 26, 2013, 13:35");
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.setHeadline("BCCI suspends Gurunath pending inquiry ");
newsData.setReporterName("Rajiv Chandan");
newsData.setHeadline("Life convict can`t claim freedom after 14 yrs:
SC");
newsData.setHeadline("Indian Army refuses to share info on soldiers
mutilated at LoC");
newsData.setHeadline("French soldier stabbed; link to Woolwich attack
being probed");
newsData.setReporterName("Sudeep Nanda");
return results;
}
}
3.4. Output

4. Customizing ListView
Read More from JAVATECHIG.COM

Android list view tutorial by Javatechig

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Android list view tutorial by Javatechig

Similaire à Android list view tutorial by Javatechig (20)

Dernier

Dernier (20)

Android list view tutorial by Javatechig