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.

1. GridView
Tutorial
Perfect APK

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

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

4. 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"

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

6. 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"

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

8. 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() {

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

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

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();

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

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