Custom Gridview Example In Android – Source Code

In this example making a grid view with a custom adapter.

Step : 1 – grid_view_android_example.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>

Step : 2 – GridViewAndroidExample.java :

 
public class GridViewExample extends Activity {
 
        GridView gridView;
     
        // This Data show in grid ( Used by adapter )
 
        static final String[ ] GRID_DATA = new String[] { 
                                                           Windows" ,
                                                           "iOS", 
                                                           "Android" ,
                                                           "Blackberry",
                                                           "Java" ,
                                                           "JQuery", 
                                                           "Phonegap",
                                                           "SQLite",        
                                                           "Thread" ,
                                                           "Video"
                                                        };
     
        @Override
        public void onCreate(Bundle savedInstanceState) {
     
            super.onCreate(savedInstanceState);
            setContentView( R.layout.grid_view_android_example );
     
            // Get gridview object from xml file
 
            gridView = (GridView) findViewById(R.id.gridView1);
     
            // Set custom adapter (GridAdapter) to gridview
 
            gridView.setAdapter(  new GridAdapter( this, GRID_DATA ) );
     
            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();
     
                }
            });
     
        }
 
}
 

Step : 3 – CustomGridAdapter.java :
Custom adapter to create each element in grid view.

public class CustomGridAdapter extends BaseAdapter {
 
        private Context context;
        private final String[] gridValues;
     
        //Constructor to initialize values
        public CustomGridAdapter(Context context, String[ ] gridValues) {
 
            this.context        = context;
            this.gridValues     = gridValues;
        }
         
        @Override
        public int getCount() {
             
            // Number of times getView method call depends upon gridValues.length
            return gridValues.length;
        }
     
        @Override
        public Object getItem(int position) {
             
            return null;
        }
     
        @Override
        public long getItemId(int position) {
             
            return 0;
        }
         
         
        // Number of times getView method call depends upon gridValues.length
         
        public View getView(int position, View convertView, ViewGroup parent) {
     
            // LayoutInflator to call external grid_item.xml file
             
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     
            View gridView;
     
            if (convertView == null) {
     
                gridView = new View(context);
     
                // get layout from grid_item.xml ( Defined Below )
 
                gridView = inflater.inflate( R.layout.grid_item , null);
     
                // set value into textview
                 
                TextView textView = (TextView) gridView
                        .findViewById(R.id.grid_item_label);
 
                textView.setText(gridValues[position]);
     
                // set image based on selected text
                 
                ImageView imageView = (ImageView) gridView
                        .findViewById(R.id.grid_item_image);
     
                String arrLabel = gridValues[ position ];
     
                if (arrLabel.equals("Windows")) {
                     
                    imageView.setImageResource(R.drawable.windows_logo);
                     
                } else if (arrLabel.equals("iOS")) {
                     
                    imageView.setImageResource(R.drawable.ios_logo);
                     
                } else if (arrLabel.equals("Blackberry")) {
                     
                    imageView.setImageResource(R.drawable.blackberry_logo);
                     
                } else {
                     
                    imageView.setImageResource(R.drawable.android_logo);
                }
     
            } else {
 
               gridView = (View) convertView;
            }
     
            return gridView;
        }
}

Step : 4 – grid_item.xml :

 
<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>
     
               <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="0dp"
                android:orientation="vertical">
                 
                        <TextView
                            android:id="@+id/grid_item_label"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:layout_marginTop="3px"
                            android:textSize="15px" >
                        </TextView>
                         
                        <TextView
                            android:id="@+id/grid_item_label_static"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Example"
                            android:layout_marginTop="3px"
                            android:textSize="12px" />
                         
                </LinearLayout>       
     
  
</LinearLayout>