Android GridView Tutorial
Upcoming SlideShare
Loading in...5
×
 

Android GridView Tutorial

on

  • 283 views

GridViews provide an appealing way of displaying a collection of items. In cases in which the order of the items is not important, and when items can be displayed as icons or thumbnails, a GridView is ...

GridViews provide an appealing way of displaying a collection of items. In cases in which the order of the items is not important, and when items can be displayed as icons or thumbnails, a GridView is often a good choice. In other cases you might want to consider other types of views, such as a ListView. In this tutorial you learn how to properly use a GridView in your Android apps, by following a GridView example for understanding the building blocks, patterns, and best practices.

Statistics

Views

Total Views
283
Views on SlideShare
283
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Android GridView Tutorial Android GridView Tutorial Presentation Transcript

  • GridView Tutorial Perfect APK
  • Android GridView Tutorial GridViews provide an appealing way of displaying a collection of items. In cases in which the order of the items is not important, and when items can be displayed as icons or thumbnails, a GridView is often a good choice. In other cases you might want to consider other types of views, such as a ListView. In this tutorial you learn how to properly use a GridView in your Android apps, by following a GridView example for understanding the building blocks, patterns, and best practices. Please note that the icon set for this example was created by Design Deck.
  • Building Blocks Every GridView 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 GridView item XML layout file to be used by the adapter. In this tutorial we will be using a layout that contains an ImageView for the icon, and aTextView for the title. ● Parent View Layout File - the layout file for the activity or fragment. In this tutorial we will be using a RelativeLayout that contains a single GridView. ● Data Container - used for holding the data of a single GridView 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 and a title. ● Adapter - used for creating the views of the GridView items. In this tutorial we will be using a custom adapter that extends the BaseAdapter class. ● Activity or Fragment - the Activity or Fragment in which the GridView is displayed.
  • Item Layout File The item layout file is used by the adapter for creating the item view. Below is an example of a GridView item: The item view is described in the res/layout/gridview_item.xml file below: 1. <?xml version="1.0" encoding="utf-8"?> 2. <!-- the parent view --> 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"
  • Item Layout File <!-- the ImageView for the icon --> 1. <ImageView android:id="@+id/ivIcon" 2. android:layout_width="wrap_content" 3. android:layout_height="wrap_content" 4. android:padding="1dp" 5. android:contentDescription="@string/icon_content_description" 6. android:scaleType="fitXY" 7. android:layout_alignParentTop="true" 8. android:layout_centerHorizontal="true" /> 9. 10. <!-- the TextView for the title --> 11. <TextView android:id="@+id/tvTitle" 12. android:layout_below="@id/ivIcon" 13. android:layout_width="wrap_content" 14. android:layout_height="wrap_content" 15. android:lines="1" 16. android:gravity="center_horizontal" 17. android:layout_centerHorizontal="true" 18. android:textAppearance="@android:style/TextAppearance.Medium" /> 19. </RelativeLayout>
  • Parent View Layout File In this tutorial the GridView is displayed inside a fragment. The fragment view is described in the res/layout/fragment_gridview.xml file below: 1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2. xmlns:tools="http://schemas.android.com/tools" 3. android:layout_width="match_parent" 4. android:layout_height="match_parent" 5. tools:context=".GridViewFragment" > 6. 7. <GridView android:id="@+id/gridView" 8. android:layout_width="fill_parent" 9. android:layout_height="fill_parent" 10. android:columnWidth="80dp"
  • Data Container The GridViewItem class below is used for holding the data of the GridView item: 1. public class GridViewItem { 2. public final Drawable icon; // the drawable for the ListView item ImageView 3. public final String title; // the text for the GridView item title 4. 5. public ListViewItem(Drawable icon, String title) { 6. this.icon = icon; 7. this.title = title; 8. } 9. }
  • Adapter The adapter class in this example extends the BaseAdapter abstract class. The getView() method is used by the adapter for creating the item view using the item layout file. It uses the View Holder pattern which prevents using findViewById() repeatedly. Below is the GridViewAdapter class used in this example: 1. public class GridViewAdapter extends BaseAdapter { 2. private Context mContext; 3. private List<GridViewItem> mItems; 4. 5. public GridViewAdapter(Context context, List<GridViewItem> items) { 6. mContext = context; 7. mItems = items; 8. } 9. 10. @Override 11. public int getCount() {
  • 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(mContext); 8. convertView = inflater.inflate(R.layout.gridview_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. convertView.setTag(viewHolder); 15. } else { 16. // recycle the already inflated view 17. viewHolder = (ViewHolder) convertView.getTag(); 18. } 19. 20. // update the item view 21. GridViewItem item = mItems.get(position); 22. viewHolder.ivIcon.setImageDrawable(item.icon); 23. viewHolder.tvTitle.setText(item.title); 24. 25. return convertView; 26. }
  • 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. } 11. }
  • Activity of Fragment In this example a Fragment is used for displaying the GridView. The GridViewDemoFragment class below extends the Fragment class and implements the OnItemClickListener interface for handling GridView item clicks in the onItemClick() method: 1. public class GridViewDemoFragment extends Fragment implements OnItemClickListener { 2. private List<GridViewItem> mItems; // GridView items list 3. private GridViewAdapter mAdapter; // GridView adapter 4. 5. @Override 6. public void onAttach(Activity activity) { 7. super.onAttach(activity); 8. 9. // set the title for the action bar 10. final ActionBar actionBar = activity.getActionBar();
  • Activity of Fragment 1. @Override 2. public void onCreate(Bundle savedInstanceState) { 3. super.onCreate(savedInstanceState); 4. 5. // initialize the items list 6. mItems = new ArrayList<GridViewItem>(); 7. Resources resources = getResources(); 8. 9. mItems.add(new GridViewItem(resources.getDrawable(R.drawable.aim), getString(R.string.aim))); 10. : 11. mItems.add(new GridViewItem(resources.getDrawable(R.drawable.youtube), getString(R.string.youtube))); 12. }
  • Activity of Fragment 1. @Override 2. public View onCreateView(LayoutInflater inflater, ViewGroup container, 3. Bundle savedInstanceState) { 4. // inflate the root view of the fragment 5. View fragmentView = inflater.inflate(R.layout.fragment_gridview, container, false); 6. 7. // initialize the adapter 8. mAdapter = new GridViewAdapter(getActivity(), mItems); 9. 10. // initialize the GridView 11. GridView gridView = (GridView) fragmentView.findViewById(R.id.gridView); 12. gridView.setAdapter(mAdapter); 13. gridView.setOnItemClickListener(this); 14. 15. return fragmentView; 16. } 17. 18. @Override 19. public void onItemClick(AdapterView<?> parent, View view, int position, 20. long id) { 21. // retrieve the GridView item 22. GridViewItem item = mItems.get(position); 23. 24. // do something 25. Toast.makeText(getActivity(), item.title, Toast.LENGTH_SHORT).show(); 26. } 27. }