Android: Display Images in GridView Layout


              Displaying images in Android gridview layout is quite simple, there are lot more stuffs that can be done beyond displaying. This example will explain you the basic display logic.

Step 1:
                Let’s first create a gridview layout. Right click on layout folder and create a gridview layout. I have named it as gridview.xml. Name it as you wish and continue to step 2

Step 2:
                Now I am going to set the created layout as my main layout. Not necessary, but I am explaining it here.




<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.image_gridview.MainActivity"
            android:label="@string/app_name" >           
        </activity>
        <activity android:name="gridview">           
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>     
        </activity>
    </application>



Step 3
                Create an action class for gridview.xml. Go to Android Manifest.xml- Application Tab, click on Add and create a new activity and name it as gridView.xml. If you’re not clear with this explanation, follow the steps for creating New Activity here. 


Step 4

gridview.xml



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



Explanation: All here are self-explanatory, Set Column width, horizontal spacing as your wish.

Step 5

Gridview.java                  



package com.example.image_gridview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class gridview extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.gridview);
         GridView gridview = (GridView) findViewById(R.id.gridview);   
         gridview.setAdapter(new ImageAdapter(this));            
    }             
    public class ImageAdapter extends BaseAdapter{
         private Context mContext;
         public int getCount() {
              return mThumbIds.length;
         }                               
         public Object getItem(int position) {
              return mThumbIds[position];
         }                               
         public long getItemId(int position) {
              return 0;
         }                               
         public ImageAdapter(Context c) {
              mContext = c;
         }                         
                               
         public View getView(int position, View convertView, ViewGroup parent) {
              ImageView imageView;
              if (convertView == null){  
                 imageView = new ImageView(mContext);
                 imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                 imageView.setPadding(8, 8, 8, 8);
              } 
              else{
                  imageView = (ImageView) convertView;
              }
              imageView.setImageResource(mThumbIds[position]);
              return imageView;
         }
                              
         private Integer[] mThumbIds = {
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7,
               R.drawable.sample_0, R.drawable.sample_1,
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7,
               R.drawable.sample_0, R.drawable.sample_1,
               R.drawable.sample_2, R.drawable.sample_3,
               R.drawable.sample_4, R.drawable.sample_5,
               R.drawable.sample_6, R.drawable.sample_7
          };        
     }

}


sample_2, sample_3 are the name of the images. Images has to be placed copied inside "drawable-mdpi" directory.

Run the code and you will be able to see the below output for your images.












Reactions:

5 comments :

  1. How to set sounds to each grid element?

    ReplyDelete
  2. Very clear and beautifully laid out explanation.
    Step 6 Adding a caption for each image
    Step 7 Horizontal Scrolling
    Step 8 Making each image clickable
    Would make it even better

    ReplyDelete
  3. how to get these images when we click on each images which are showing on gridview

    ReplyDelete
  4. Hello,
    if i want load many images from my server?

    Regards.

    ReplyDelete
  5. can you upload your project.zip, cause i have some problems ((((

    ReplyDelete