Android list view tutorial by Javatechig
javatechig
1,130 views
10 slides
Mar 11, 2014
Slide 1 of 10
1
2
3
4
5
6
7
8
9
10
About This Presentation
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 ...
Slide Content
Android ListView Tutorial
By - Javatechig.com
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.
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;
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.
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"
?
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="w rap_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() {
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="w rap_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. Let’s put all of them together and build a custom list.
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_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
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);
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
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.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 Gu pta");
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
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 Gu pta");
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
Read More from JAVATECHIG.COM
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,130
- Slides 10
- Age 4288 days
Related Slideshows
1
DTI BPI Pivot Small Business - BUSINESS START UP PLAN
MeljunCortes
34 views
1
CATHOLIC EDUCATIONAL Corporate Responsibilities
MeljunCortes
36 views
11
Karin Schaupp – Evocation; lançamento: 2000
alfeuRIO
34 views
10
Pillars of Biblical Oneness in the Book of Acts
JanParon
30 views
31
7-10. STP + Branding and Product & Services Strategies.pptx
itsyash298
31 views
44
Business Legislation PPT - UNIT 1 jimllpkggg
slogeshk98
35 views