Custom GridView

In order to modify GridView to suit our requirement, we can implement our own adapter extends BaseAdapter.








Create /res/layout/gridlayout.xml, the layout of individual grid

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <ImageView
  android:id="@+id/image"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/>
</LinearLayout>

main.xml, The ayout, it 's same as in the last post Simple GridView example.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<GridView
 android:id="@+id/grid"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:numColumns="2"
 android:columnWidth="100px"
 android:stretchMode="columnWidth"
 android:gravity="center"/>
</LinearLayout>

package com.AndroidGridView;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class AndroidGridViewActivity extends Activity {
 
 public class MyAdapter extends BaseAdapter {
  
  final int NumberOfItem = 30;
  private Bitmap[] bitmap = new Bitmap[NumberOfItem];
  
  private Context context;
  private LayoutInflater layoutInflater;
  
  MyAdapter(Context c){
   context = c;
   layoutInflater = LayoutInflater.from(context);
   
   //init dummy bitmap,
   //using R.drawable.icon for all items
   for(int i = 0; i < NumberOfItem; i++){
    bitmap[i] = BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);
   }
  }

  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return bitmap.length;
  }

  @Override
  public Object getItem(int position) {
   // TODO Auto-generated method stub
   return bitmap[position];
  }

  @Override
  public long getItemId(int position) {
   // TODO Auto-generated method stub
   return position;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   // TODO Auto-generated method stub
   
   View grid;
   if(convertView==null){
    grid = new View(context);
    grid = layoutInflater.inflate(R.layout.gridlayout, null); 
   }else{
    grid = (View)convertView; 
   }
   
   ImageView imageView = (ImageView)grid.findViewById(R.id.image);
   imageView.setImageBitmap(bitmap[position]);
   
   return grid;
  }

 }

 GridView gridView;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gridView = (GridView)findViewById(R.id.grid);

        MyAdapter adapter = new MyAdapter(this);
        gridView.setAdapter(adapter);
    }
    
}

next:
- Custom GridView II, with ImageView and TextView