GridView Example Android SDK Tutorial

1. Android GridView is most powerful and useful layout.
2. GriedView is generally used when we want to show images,videos,icons.
3. Also used to make audio player,video player,image gallary.
4. Today, We show you how to create Custom GridView Example with Custom Adapter.

1. Create new Android Project call AndroidGridViewExample,Download 15 images and put into res/drawable folder and create gridlayout.xml file and modify as given below.

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

2. Now create one new layout in res/layout folder and give name image.xml file for displaying Full screen image like second image display below and modify source as above.

    <?xml version="1.0" encoding="utf-8"?>  
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
      android:layout_width="match_parent"  
      android:layout_height="match_parent"  
      android:orientation="vertical" >  
      
      <ImageView android:id="@+id/full_image_view"  
             android:layout_width="fill_parent"  
             android:layout_height="fill_parent"/>  
      
    </LinearLayout>  
   

3. Create ImageAdapter.java in project src folder and modify as below also modify name of your images in array.

    package com.idroid.gridview;  
      
    import android.content.Context;  
    import android.view.View;  
    import android.view.ViewGroup;  
    import android.widget.BaseAdapter;  
    import android.widget.GridView;  
    import android.widget.ImageView;  
      
    public class ImageAdapter extends BaseAdapter {  
         private Context mContext;  
           
         public Integer[] mThumbIds = {  
                   R.drawable.image1, R.drawable.image2,  
                   R.drawable.image3, R.drawable.image4,  
                   R.drawable.image5, R.drawable.image6,  
                   R.drawable.image7, R.drawable.image8,  
                   R.drawable.image9, R.drawable.image10,  
                   R.drawable.image11, R.drawable.image12,  
                   R.drawable.image13, R.drawable.image14,  
                   R.drawable.image15  
         };  
           
         public ImageAdapter(Context c){  
              mContext = c;  
         }  
      
         @Override  
         public int getCount() {  
              return mThumbIds.length;  
         }  
      
         @Override  
         public Object getItem(int position) {  
              return mThumbIds[position];  
         }  
      
         @Override  
         public long getItemId(int position) {  
              return 0;  
         }  
      
         @Override  
         public View getView(int position, View convertView, ViewGroup parent) {                 
              ImageView imageView = new ImageView(mContext);  
        imageView.setImageResource(mThumbIds[position]);  
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);  
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));  
        return imageView;  
         }  
      
    }  
      
   

4. Create AndroidGridViewActivity.java file in src folder used for displaying GridView and set GriedView Adapter as we have created previously.

    package com.idroid.gridview;  
      
    import android.app.Activity;  
    import android.content.Intent;  
    import android.os.Bundle;  
    import android.view.View;  
    import android.widget.AdapterView;  
    import android.widget.AdapterView.OnItemClickListener;  
    import android.widget.GridView;  
      
    public class AndroidGridViewActivity extends Activity {  
           
         @Override  
         public void onCreate(Bundle savedInstanceState) {  
              super.onCreate(savedInstanceState);  
              setContentView(R.layout.gridlayout);  
      
              GridView gridView = (GridView) findViewById(R.id.grid_view);  
              gridView.setAdapter(new ImageAdapter(this));  
              gridView.setOnItemClickListener(new OnItemClickListener() {  
                   @Override  
                   public void onItemClick(AdapterView<?> parent, View v,  
                             int position, long id) {  
                          
                        // Sending image id to FullScreenActivity and pass index  
                        Intent i = new Intent(getApplicationContext(), FullSizeImageActivity.class);  
                        i.putExtra("id", position);  
                        startActivity(i);  
                   }  
              });  
         }  
    }  
   

5. Finally create new .java file for displaying Full size image and modify as above code.

    package com.idroid.gridview;  
      
    import android.app.Activity;  
    import android.content.Intent;  
    import android.os.Bundle;  
    import android.widget.ImageView;  
      
    public class FullSizeImageActivity extends Activity {  
           
           
         @Override  
         public void onCreate(Bundle savedInstanceState) {  
              super.onCreate(savedInstanceState);  
              setContentView(R.layout.image);  
                
              // get intent data  
              Intent i = getIntent();  
                
              // Selected image id  
              int position = i.getExtras().getInt("id");  
              ImageAdapter imageAdapter = new ImageAdapter(this);  
                
              ImageView imageView = (ImageView) findViewById(R.id.full_image_view);  
              imageView.setImageResource(imageAdapter.mThumbIds[position]);  
         }  
      
    }  
      
   

6. Now Build and run project in Simulator you can see the below like output and when click on image it is display full screen image on next Activity.

Download Source Code :AndroidGridViewExample.rar