Android Layout - GridView

Grid View Layouts are used to display data in a grid. For e.g Gallery application in most of the android devices uses gridview to show images in a grid manner.

So Let's start by creating a project named GridViewTut in Android Studio. ( For any doubt about creating android project , refer to my 1st post )

1. Now, Create a xml layout file named gridview.xml and make sure its content matches to the code snippet given below.
   
   

   <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:columnWidth="90dp"
       android:gravity="center"
       android:horizontalSpacing="10dp"
       android:numColumns="auto_fit"
       android:stretchMode="columnWidth"
       android:verticalSpacing="10dp">
   
   </GridView>
   
   
   

2. Open MainActivity.java file and edit its content as follows :
   
   import android.support.v7.app.ActionBarActivity;
   import android.os.Bundle;
   import android.view.Menu;
   import android.view.MenuItem;
   import android.widget.GridView;
   
   public class MainActivity extends ActionBarActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
   
            setContentView(R.layout.activity_main);
            
            //getting gridview id
            GridView gv = (GridView) findViewById(R.id.grid_view);
            gv.setAdapter(new ImageAdapter(this)); //setting adapter for grid
   
            //it gets called when you click on an image
            gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                
                 @Override
                 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                      Toast.makeText(MainActivity.this,"You clicked image at position" + position,Toast.LENGTH_SHORT).show();
                }
            });
      }
   }
   
   
   

3. Copy all the images in drawable directory . Here my images are named as tip1, tip2 ...till tip10.
   
   

4. There will be an error at ImageAdapter as we have not created such class yet. So create a new java file (Right Click) java -> New -> Java Class.
   
   Edit its content as follows :
   
   

   public class ImageAdapter extends BaseAdapter {
   
        private Context mContext;
   
        public Integer[] mThumbIds = {
            R.drawable.tip1, R.drawable.tip2,
            R.drawable.tip3, R.drawable.tip4,
            R.drawable.tip5, R.drawable.tip6,
            R.drawable.tip7, R.drawable.tip8,
            R.drawable.tip9, R.drawable.tip10
       };
   
       // Constructor
       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(150, 150));
           return imageView;
       }
   }
   
   

That's it. You are almost done. Last thing to remember is that when you create a new activity, you have to declare it in the manifest file under application tag. Here we have not created any new activity as we are using MainActivity that is already defined in Manifest file by default. Run your project.