GridView

GridView shows items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view.

This exercise show how to implement a GridView to display drawable in /res.



- Create a Android Application, AndroidGridView2 (It's my first time to use Android SDK r3 for Android 2.0). Target Android 2.0 (not necessary).

- Copy some picture files (or download from the file on the end of this text) into the folder /res/drawable-ldpi/ (for Android 2.0) or /res/drawable/ for former version, named drawing_01~14.png

- Modify main.xml to have a GridView.

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>

- Modify AndroidGridView2.java

package com.exercise.AndroidGridView2;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class AndroidGridView2 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);

   GridView gridview = (GridView) findViewById(R.id.gridview);
   gridview.setAdapter(new ImageAdapter(this));

   gridview.setOnItemClickListener(gridviewOnItemClickListener);

}

private GridView.OnItemClickListener gridviewOnItemClickListener =
 new GridView.OnItemClickListener(){

   @Override
   public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
     long arg3) {
    // TODO Auto-generated method stub
    Toast.makeText(AndroidGridView2.this,
      arg0.getAdapter().getItem(arg2).toString(),
      Toast.LENGTH_LONG).show();
   }


};


public class ImageAdapter extends BaseAdapter {
   private Context mContext;

   public ImageAdapter(Context c) {
       mContext = c;
   }

   public int getCount() {
       return mThumbIds.length;
   }

   public Object getItem(int position) {
       return mThumbIds[position];
   }

   public long getItemId(int position) {
    return position;
   }

   // create a new ImageView for each item referenced by the Adapter
   public View getView(int position, View convertView, ViewGroup parent) {
       ImageView imageView;
       if (convertView == null) {
        // if it's not recycled, initialize some attributes
           imageView = new ImageView(mContext);
           imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
           imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
           imageView.setPadding(8, 8, 8, 8);
       } else {
           imageView = (ImageView) convertView;
       }

       imageView.setImageResource(mThumbIds[position]);
       return imageView;
   }

  // references to our images
   private Integer[] mThumbIds = {
           R.drawable.drawing_01,
           R.drawable.drawing_02,
           R.drawable.drawing_03,
           R.drawable.drawing_04,
           R.drawable.drawing_05,
           R.drawable.drawing_06,
           R.drawable.drawing_07,
           R.drawable.drawing_08,
           R.drawable.drawing_09,
           R.drawable.drawing_10,
           R.drawable.drawing_11,
           R.drawable.drawing_12,
           R.drawable.drawing_13,
           R.drawable.drawing_14
   };
}

}

--------------------------------------------------------------------
Little bit advice:
- Set a break point inside getView(), you can know more on the operation of getView, such as when it will be called, and when go to initialize attributes, or load the previous convertView.

- Modify onItemClick() to check the value of arg0, arg1, arg2 & arg3.

In my code, the object ID of the clicked item of the GridView will be displayed on the Toast, in decimal. It's match with the ID of the item in the file R.java, in hexdecimal.



- Try the Tool, hierarchyviewer, it can give you a hierarchy viewer of the current view.
--------------------------------------------------------------------

Download the files.
--------------------------------------------------------------------
Another exercise
- Loading Android Resource in GridView.
- Custom GridView