Android - Custom Gridview Adapter Example

Previous article I introduced the GridView android example you can refer to the link article, today I will show you a custom GridView adapters example on Android, so you can use BaseAdapter on Android GridView to custom images and text on the GridView android.
1. Two Android Layout files


File – res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:columnWidth="100dp"
    android:stretchMode="columnWidth"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</GridView>

File – res/layout/mobile.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" >
 
    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_marginRight="10px"
        android:src="@drawable/android_logo" >
    </ImageView>
 
    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:layout_marginTop="5px"
        android:textSize="15px" >
    </TextView>
 
</LinearLayout>

2. Custom Adapter

public class ImageAdapter extends BaseAdapter {
 private Context context;
 private final String[] mobileValues;

 public ImageAdapter(Context context, String[] mobileValues) {
  this.context = context;
  this.mobileValues = mobileValues;
 }

 public View getView(int position, View convertView, ViewGroup parent) {

  LayoutInflater inflater = (LayoutInflater) context
   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

  View gridView;

  if (convertView == null) {

   gridView = new View(context);

   // get layout from mobile.xml
   gridView = inflater.inflate(R.layout.mobile, null);

   // set value into textview
   TextView textView = (TextView) gridView
     .findViewById(R.id.grid_item_label);
   textView.setText(mobileValues[position]);

   // set image based on selected text
   ImageView imageView = (ImageView) gridView
     .findViewById(R.id.grid_item_image);

   String mobile = mobileValues[position];

   if (mobile.equals("Windows")) {
    imageView.setImageResource(R.drawable.windows_logo);
   } else if (mobile.equals("iOS")) {
    imageView.setImageResource(R.drawable.ios_logo);
   } else if (mobile.equals("Blackberry")) {
    imageView.setImageResource(R.drawable.blackberry_logo);
   } else {
    imageView.setImageResource(R.drawable.android_logo);
   }

  } else {
   gridView = (View) convertView;
  }

  return gridView;
 }

 @Override
 public int getCount() {
  return mobileValues.length;
 }

 @Override
 public Object getItem(int position) {
  return null;
 }

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

}

3. Activity

public class GridViewActivity extends Activity {

 GridView gridView;

 static final String[] MOBILE_OS = new String[] { 
  "Android", "iOS","Windows", "Blackberry" };

 @Override
 public void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  gridView = (GridView) findViewById(R.id.gridView1);

  gridView.setAdapter(new ImageAdapter(this, MOBILE_OS));

  gridView.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView<?> parent, View v,
     int position, long id) {
    Toast.makeText(
       getApplicationContext(),
       ((TextView) v.findViewById(R.id.grid_item_label))
       .getText(), Toast.LENGTH_SHORT).show();

   }
  });

 }

}

4. Demo Code android example.