Extending and Customizing GridView with Custom Listener in Android

After customizing ListView now we will see how to customize and extend your GridView then we will add Custom Listener to it as well.

First we need to create our custom GridView, we used the package com.almondmendoza.myGridView

public class MyCustomGridView extends GridView implements OnItemClickListener{
  private Listener mListener;

  public MyCustomGridView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setOnItemClickListener(this);
  }

  public void onItemClick(AdapterView parent, View v, int position, long id) {
    if (mListener != null) {
      mListener.onClick(position);
    }
  }

  public void setListener(Listener l){
    mListener = l;
  }

  public interface Listener{
    void onClick(int position); 
  }   
}

Explanation
Let us extend GridView and implement OnItemClickListener so that we could have a click even on each item
public class MyCustomGridView extends GridView implements OnItemClickListener

Use this constructor so we could use this class on our xml
public MyCustomGridView(Context context, AttributeSet attrs) { ... }

Create an Listener interface for us to use in other classes
public interface Listener{ void onClick(int position); }

Function which will be called when an item is clicked (implementation of OnItemClickListener)
public void onItemClick(AdapterView parent, View v, int position, long id) {

Call our onClick function from the instance that uses our Listener interface
if (mListener != null) { mListener.onClick(position); }

Main Class

public class Main extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    MyCustomGridView mGrid = (MyCustomGridView) findViewById(R.id.my_custom_grid_view);
    mGrid.setListener(new ItemListener());
    mGrid.setAdapter(new ImageAdapter(this)); 
  }

  private class ItemListener implements MyCustomGridView.Listener{
    public void onClick(int position) {
      Log.d("almond","test");
    }
  }

  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 null;
    }

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

    // 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;
    }

    private Integer[] mThumbIds = {
      R.drawable.icon,R.drawable.icon,R.drawable.icon
    };
  }
}

Explanation
We had used xml with our MyCustomGridView and here we get that view
MyCustomGridView mGrid = (MyCustomGridView) findViewById(R.id.my_custom_grid_view);

Create a class that uses the Listener interface we used in MyCustomGridView
private class ItemListener implements MyCustomGridView.Listener{ ... }

Set an instance of the ItemListener class
mGrid.setListener(new ItemListener());

As GridView is an extension of a AbsListView, we need a ListAdapter and we extend BaseAdapter (Please read this for the explanation of the codes inside - Hello GridView)
public class ImageAdapter extends BaseAdapter { ... }

We then set an instance of ImageAdaptor to be our adapter to our GridView
mGrid.setAdapter(new ImageAdapter(this));

Main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
>
  <com.almondmendoza.myGridView.MyCustomGridView
    android:id="@+id/my_custom_grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:cacheColorHint="#00000000"
    android:listSelector="@android:color/transparent"
    android:numColumns="auto_fit"
    android:columnWidth="160px"
  />
</LinearLayout>

Explanation
Use our class with our XML
<com.almondmendoza.myGridView.MyCustomGridView ... >


References
Launcher app
Browser App
Hello GridView

Update History
   Jan 17, 2012 - Visual Update