Sep 5, 2011

Custom GridView II, with ImageView and TextView

Modify from last post Custom GridView, to implement custom GridView, with bitmap and text in each grid.



GridView with ImageView and TextView




/res/layout/gridlayout.xml
<?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"/>
<TextView
android:id="@+id/text"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>





layout file , main.xml
<?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>





main java code
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;
import android.widget.TextView;

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]);
TextView textView = (TextView)grid.findViewById(R.id.text);
textView.setText(String.valueOf(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);
}

}




5 comments:

  1. Great for Beginners

    ReplyDelete
  2. Thanks, for me was very helpful.

    ReplyDelete
  3. Thank you for this very helpful tutorial on a custom GridView with ImageView and TextView. I compiled a list of some top resources I found on creating an android gridview layout. I included your post. Check it out/ feel free to share. http://www.verious.com/board/Giancarlo-Leonio/creating-an-android-gridview-layout/ Hope its useful to other developers too. :)

    ReplyDelete

Infolinks In Text Ads