Almost every Android app contains at least one ListView. ListView is one of several ways of displaying a collection of items, and in many cases it is the most appropriate, especially in cases where the items should appear in a specific order, or where text is displayed. In other cases you might want to consider other types of views, such as a GridView. In this tutorial you learn how to properly use a ListView in your Android apps, by following a ListView example for understanding the building blocks, patterns, and best practices.

1. Android
ListView
Perfect APK

2. Android ListView Tutorial
Almost every Android app contains at least one ListView. ListView is one of several ways of displaying a collection of
items, and in many cases it is the most appropriate, especially in cases where the items should appear in a
specific order, or where text is displayed. In other cases you might want to consider other types of views, such as
a GridView.
In this tutorial you learn how to properly use a ListView in your Android apps, by following a ListView example for
understanding the building blocks, patterns, and best practices. Please note that the icon set for this example was
created by Design Deck.

3. Building Blocks
Every ListView requires the following elements, although some of the them may be hidden by using default components
provided in the Android SDK:
● Item Layout File - a ListView item XML layout file to be used by the list adapter. Sometimes layout files from the
Android SDK such as simple_list_item_1 and simple_list_item_2 are used. In this tutorial we will be using a layout
that contains an ImageView for the icon, and TextViews for the title and the description.
● Parent View Layout File - the layout file for the activity or fragment. In this tutorial this element is hidden by using the
default view of the ListFragment. For information about using a custom layout with a ListActivity or ListFragment read
Custom layout in ListActivity and ListFragment.
● Data Container - used for holding the data of a single ListView item. May be as simple as a String or a complex class.
In this tutorial we will be using a class that includes an icon, a title and a description.
● List Adapter - used for creating the views of the ListView items. In this tutorial we will be using a custom list adapter
that extends the ArrayAdapter class.
● Activity or Fragment - the ListView can be used directly or by using a ListActivity or ListFragment which are

4. Items Layout File
The item layout file is used by the list adapter for creating the row view. Below is an example of a ListView row:
The row view is described in the res/layout/listview_item.xml file below:
1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- the parent view - provides the gray background -->
3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:layout_gravity="center"
7. android:gravity="center_vertical"
8. android:background="@color/frame_background"
9. android:padding="5dp" >

5. Items Layout File
1.
2. <!-- the innner view - provides the white rectangle -->
3. <RelativeLayout android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:background="@drawable/frame" >
6.
7. <!-- the icon view -->
8. <ImageView android:id="@+id/ivIcon"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:padding="5dp"
12. android:contentDescription="@string/icon_content_description"
13. android:scaleType="fitXY"
14. android:layout_alignParentLeft="true" />

6. Items Layout File
1.
2. <!-- the container view for the title and description -->
3. <RelativeLayout android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. android:layout_toRightOf="@id/ivIcon"
6. android:layout_centerVertical="true" >
7.
8. <!-- the title view -->
9. <TextView android:id="@+id/tvTitle"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:textAppearance="@android:style/TextAppearance.Medium" />

7. Items Layout File
1. <!-- the description view -->
2. <TextView android:id="@+id/tvDescription"
3. android:layout_below="@id/tvTitle"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. android:textAppearance="@android:style/TextAppearance.Small" />
7. </RelativeLayout>
8.
9. </RelativeLayout>
10.
11. </RelativeLayout>

8. Items Layout File
The layout colors for this example are defined in the res/values/colors.xml file below:
1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <color name="frame">#b4b4b4</color>
4. <color name="frame_solid">#eee</color>
5. <color name="frame_background">#bcbcbc</color>
6. </resources>
The rectangular frame in this example is defined in the res/drawable/frame.xml file below:
1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle" >
4.
5. <corners android:radius="2dp" />
6. <stroke android:width="1dp" android:color="@color/frame" />
7. <solid android:color="@color/frame_solid"/>
8. </shape>

9. Parent View Layout File
In this example I used the default view of the ListFragment. For information
about using a custom layout with a ListActivity or ListFragment read Custom
layout in ListActivity and ListFragment.

10. Data Container
The ListViewItem class below is used for holding the data of the ListView item:
1. public class ListViewItem {
2. public final Drawable icon; // the drawable for the ListView item ImageView
3. public final String title; // the text for the ListView item title
4. public final String description; // the text for the ListView item description
5.
6. public ListViewItem(Drawable icon, String title, String description) {
7. this.icon = icon;
8. this.title = title;
9. this.description = description;
10. }

11. List Adapter
The list adapter class in this example extends the ArrayAdpter class. It overrides the getView() method of the ArrayAdapter in which the row
view is created, and uses the View Holder pattern which prevents using findViewById() repeatedly. Below is the ListViewDemoAdapter
class used in this example:
1. public class ListViewDemoAdapter extends ArrayAdapter<ListViewItem> {
2.
3. public ListViewDemoAdapter(Context context, List<ListViewItem> items) {
4. super(context, R.layout.listview_item, items);
5. }

12. List Adapter
1. @Override
2. public View getView(int position, View convertView, ViewGroup parent) {
3. ViewHolder viewHolder;
4.
5. if(convertView == null) {
6. // inflate the GridView item layout
7. LayoutInflater inflater = LayoutInflater.from(getContext());
8. convertView = inflater.inflate(R.layout.listview_item, parent, false);
9.
10. // initialize the view holder
11. viewHolder = new ViewHolder();
12. viewHolder.ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
13. viewHolder.tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
14. viewHolder.tvDescription = (TextView) convertView.findViewById(R.id.tvDescription);
15. convertView.setTag(viewHolder);
16. } else {
17. // recycle the already inflated view
18. viewHolder = (ViewHolder) convertView.getTag();
19. }
20.
21. // update the item view
22. ListViewItem item = getItem(position);
23. viewHolder.ivIcon.setImageDrawable(item.icon);
24. viewHolder.tvTitle.setText(item.title);
25. viewHolder.tvDescription.setText(item.description);
26.
27. return convertView;
28. }

13. List Adapter
1. /**
2. * The view holder design pattern prevents using findViewById()
3. * repeatedly in the getView() method of the adapter.
4. *
5. * @see http://developer.android.com/training/improving-layouts/smooth-
scrolling.html#ViewHolder
6. */
7. private static class ViewHolder {
8. ImageView ivIcon;
9. TextView tvTitle;
10. TextView tvDescription;
11. }

14. Activity or Fragment
In this example a ListFragment is used for displaying the ListView. Using a ListActivity or ListFragment instead of a simple Activity or
Fragment saves a lot of boilerplate code such as setting the ListView, implementing the OnClickListener interface, and other code
encapsulated in convenience methods such as setListAdaper() and getListView(). Below is the ListViewDemoAdapter class used in this
example:
1. public class ListViewDemoFragment extends ListFragment {
2. private List<ListViewItem> mItems; // ListView items list
3.
4. @Override
5. public void onCreate(Bundle savedInstanceState) {
6. super.onCreate(savedInstanceState);
7.
8. // initialize the items list
9. mItems = new ArrayList<ListViewItem>();
10. Resources resources = getResources();

15. Activity or Fragment
1. @Override
2. public void onViewCreated(View view, Bundle savedInstanceState) {
3. super.onViewCreated(view, savedInstanceState);
4. // remove the default dividers from the ListView of the ListFragment
5. getListView().setDivider(null);
6. }
7.
8. @Override
9. public void onListItemClick(ListView l, View v, int position, long id) {
10. // retrieve theListView item
11. ListViewItem item = mItems.get(position);
12.
13. // do something
14. Toast.makeText(getActivity(), item.title, Toast.LENGTH_SHORT).show();
15. }
16. }