Your SlideShare is downloading. ×
0
Android
ListView
Perfect APK
Android ListView Tutorial
Almost every Android app contains at least one ListView. ListView is one of several ways of disp...
Building Blocks
Every ListView requires the following elements, although some of the them may be hidden by using default c...
Items Layout File
The item layout file is used by the list adapter for creating the row view. Below is an example of a Lis...
Items Layout File
1.
2. <!-- the innner view - provides the white rectangle -->
3. <RelativeLayout android:layout_width="f...
Items Layout File
1.
2. <!-- the container view for the title and description -->
3. <RelativeLayout android:layout_width=...
Items Layout File
1. <!-- the description view -->
2. <TextView android:id="@+id/tvDescription"
3. android:layout_below="@...
Items Layout File
The layout colors for this example are defined in the res/values/colors.xml file below:
1. <?xml version...
Parent View Layout File
In this example I used the default view of the ListFragment. For information
about using a custom ...
Data Container
The ListViewItem class below is used for holding the data of the ListView item:
1. public class ListViewIte...
List Adapter
The list adapter class in this example extends the ArrayAdpter class. It overrides the getView() method of th...
List Adapter
1. @Override
2. public View getView(int position, View convertView, ViewGroup parent) {
3. ViewHolder viewHol...
List Adapter
1. /**
2. * The view holder design pattern prevents using findViewById()
3. * repeatedly in the getView() met...
Activity or Fragment
In this example a ListFragment is used for displaying the ListView. Using a ListActivity or ListFragm...
Activity or Fragment
1. @Override
2. public void onViewCreated(View view, Bundle savedInstanceState) {
3. super.onViewCrea...
Upcoming SlideShare
Loading in...5
×

Android ListView Tutorial

833

Published 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 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.

Published in: Software, Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
833
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
39
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Android ListView Tutorial"

  1. 1. Android ListView Perfect APK
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×