Custom GridView

In the old exercise "GridView" show how to implement a simple GridView (like the build in Gallery app) with a simple ImageView on each grid. Here it will be modified to implement custom GridView, have a ImageView and TextView in each grid.



Create a folder /res/drawable to hold the pictures.

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"
/>

Implement mygrid.xml in folder /res/layout/, it's 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/imagepart"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/>
 <TextView
  android:id="@+id/textpart"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/>
</LinearLayout>

Modify the main Java code. Modify mThumbIds to update with your own drawable rsource name.

package com.exercise.CustomGridView;

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

public class CustomGridView extends Activity {
 
 // references to our images
 private Integer[] mThumbIds = {
   R.drawable.androider_01,
   R.drawable.androider_02,
   R.drawable.androider_03,
   R.drawable.androider_04,
   R.drawable.androider_05,
   R.drawable.androider_06,
   R.drawable.androider_07,
   R.drawable.androider_08,
   R.drawable.androider_09,
   R.drawable.androider_10,
   R.drawable.androider_11,
   R.drawable.androider_12,
   R.drawable.androider_13,
   R.drawable.androider_14,
   R.drawable.androider_15,
   R.drawable.androider_16
   };
 
    public class MyAdapter extends BaseAdapter {
     
     private Context mContext;

  public MyAdapter(Context c) {
   // TODO Auto-generated constructor stub
   mContext = c;
  }

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

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

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

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   // TODO Auto-generated method stub
   
   View grid;
    
   if(convertView==null){
    grid = new View(mContext);
    LayoutInflater inflater=getLayoutInflater();
    grid=inflater.inflate(R.layout.mygrid, parent, false);
   }else{
    grid = (View)convertView;
   }
   
   ImageView imageView = (ImageView)grid.findViewById(R.id.imagepart);
   TextView textView = (TextView)grid.findViewById(R.id.textpart);
   imageView.setImageResource(mThumbIds[position]);
   textView.setText(String.valueOf(position));

   return grid;
  }

 }

 /** 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 MyAdapter(this));

    }
}

Download the files.