Android Tutorial – Gridview with Icon and Text

In this tutorial we are going to see how to create an advanced Gridview screen, that will have text + image

Lets Start:

The first thing we need to do, is create the layout we want to use for each of the items inside the GridView, in our case we want to have an Image and also a little text or title under the image. For this we will need to have inside a linear layout an ImageView and also a TextView as seen below:

grid_item.xml file


<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/GridItem"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:gravity="center_horizontal"
   android:background="#000080">

   
   <imageview android:id="@+id/grid_item_image"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

   </imageview>
   
   <textview android:id="@+id/grid_item_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="TextView"
      android:gravity="center_horizontal"
      android:textColor="#000000">

   </textview>
   
</linearlayout>
 

After having the grid item, we need the actual grid to put the item inside:

main.xml file


< ?xml version="1.0" encoding="utf-8"?>
<gridview xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/MyGrid"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
    android:padding="5dp"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="20dp"
    android:numColumns="auto_fit"
    android:columnWidth="60dp"
    android:stretchMode="columnWidth"
    android:gravity="center_horizontal"
    android:background="#ffffff">

</gridview>
 

After all this is ready, we only need some code to glue it together


package firstdroid.tutorial.gridview;

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 MyGridView extends Activity
{
   GridView MyGrid;
   
   @Override
   public void onCreate(Bundle savedInstanceState){
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      /*Here we setContentView() to main.xml, get the GridView and then fill it with the
                   ImageAdapter class that extend from BaseAdapter */

      MyGrid = (GridView)findViewById(R.id.MyGrid);
      MyGrid.setAdapter(new ImageAdapter(this));
   }
   
   
   public class ImageAdapter extends BaseAdapter
   {
      Context MyContext;
      
      public ImageAdapter(Context _MyContext)
      {
         MyContext = _MyContext;
      }
      
      @Override
      public int getCount()
      {
                        /* Set the number of element we want on the grid */
         return 9;
      }

      @Override
      public View getView(int position, View convertView, ViewGroup parent)
      {
         View MyView = convertView;
         
         if ( convertView == null )
         {
                                /*we define the view that will display on the grid*/
            
            //Inflate the layout
            LayoutInflater li = getLayoutInflater();
            MyView = li.inflate(R.layout.grid_item, null);
            
            // Add The Text!!!
            TextView tv = (TextView)MyView.findViewById(R.id.grid_item_text);
            tv.setText("Item "+ position );
            
            // Add The Image!!!           
            ImageView iv = (ImageView)MyView.findViewById(R.id.grid_item_image);
            iv.setImageResource(R.drawable.icon);
         }
         
         return MyView;
      }

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

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

As we can see, to add a advanced grid view is very simple.

Any Question, Remark or Idea you want to add, please feel free to comment on this tutorial.

Attached a Zip with the code file

Using GridView Tutorial by Firstdroid

Enjoy,

George.