Android ListView Tutorial

  • 490 views
Uploaded on

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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
490
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
25
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. }