Custom Grid Layout - Android Example

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

GridView give flexibility to arrange components in a two-dimensional scrolling grid.

Project Structure :

grid_view_android_example.xml :

Main xml file used in GridViewExample.java file

            <?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>

GridViewAndroidExample.java :

This is Main java file to create gridview object and set Custom adapter to gridview.

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();
    
                }
            });
    
        }

}

CustomGridAdapter.java :

      Custom adapter to create each element in grid view.

      CustomGridAdapter extends BaseAdapter and override methods.

      Depending upon passed array data , getview() method called each time and create gridview elements.

      GridView  elements show according to external grid_item.xml file. ( Defined below )

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;
        }
}

grid_item.xml :

Grid view column elements will look according to grid_item.xml file.

        <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>