Wednesday, 18 September 2013

GridView Example Android SDK Tutorial

Android GridView Example Android GridView Example
  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