Tuesday, March 15, 2011

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.

Custom GridView

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.

3 comments:

Unknown said...

Hi there, I have been trying these since I got some problems doing it myself. Everything is working well but I cant see the textview anywhere, can you help me a bit?
Thanks

Erik said...
This comment has been removed by the author.
Unknown said...

Is in the email ; )