Working with GalleryView...

GalleryView:  It contains a horizontally scrolling list of view objects, also ofter used with imageicons; the user can select an item to perform some action upon. The one main benefit of using the Gallery View is its snap-to-position feature. When the user stops scrolling, the images that end up being displayed are also snapped to the center of the screen. This means the user won’t be looking at half of two separate images at one time, and as a developer, you are also aware of exactly what the user is centered on.

Here in this example I have taken a GalleryView and assign some images to it. On selecting of any image, that selected image will show in a ImageView below GalleryView on the screen

1. Design Screen:

We will need only two controls a GalleryView and an ImageView. Get the XML code for that below.

Main.xml

2. Create Resources:

Source of images in GalleryView can be /res folder, an URL etc. I have put all images in /res/drawable folder. So copy and paste all your images under this folder.

[Note: All the file name should be in lower case]

3. Java Code:

GalleryViewDemo.java

package com.example.galleryview; 

import android.os.Bundle; 
import android.app.Activity; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener; 
import android.widget.Gallery; 
import android.widget.ImageView; 
import android.widget.Toast; 
import android.support.v4.app.NavUtils; 

public class GalleryViewDemo extends Activity { 

 ImageAdapter imageAdapter; 
 ImageView image; 
     
 @Override 
     public void onCreate(Bundle savedInstanceState) 
 { 
         super.onCreate(savedInstanceState); 
         setContentView(R.layout.activity_gallery_view_demo); 
        
         Gallery gallery = (Gallery)findViewById(R.id.gallery1); 
         image = (ImageView) findViewById(R.id.imageView1); 
        
         imageAdapter = new ImageAdapter(this); 
         gallery.setAdapter(imageAdapter); 
        
         gallery.setOnItemClickListener(new OnItemClickListener() 
  { 

    public void onItemClick(AdapterView parent, View v, int position, 
        long id) 
    { 
     // TODO Auto-generated method stub 
     Toast.makeText(GalleryViewDemo.this, " " + position,       Toast.LENGTH_SHORT).show(); 
     //v = imageAdapter.getView(position, v, parent); 
     image.setImageResource(imageAdapter.images[position]); 
    } 
          
  });        
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
        getMenuInflater().inflate(R.menu.activity_gallery_view_demo, menu); 
        return true; 
    }    
}

As you can see I've created an ImageAdapter class object to set images in GalleryView and an ImageView which will get the image as resource on selection from GalleryView. Now, below statement will create actual GalleryView with images loaded in it.

gallery.setAdapter(imageAdapter);

This statement will first call getCount() method of ImageAdapter and will get that how many images are there to set in GalleryView. Next it will call getView() method as many number of time as many images are there in image array in ImageAdapter class. Every time this method will return an Image which will set to GalleryView. This entire processs is hidden from developer. Ths setAdapter() will take care of this all.

Now, after setting GalleryView I've written a listener method setOnItemClickListener(). This will fire when user touch any image from GalleryView. I've set that selected image as resource of other ImageView object.

Take a look at ImageAdapter in detail.

Here android have some surprises in setting images to GalleryView. You can't just set resources to GalleryView like ListView. You'll need some special adapter to manage GalleryView. First you'll have to create an ImageAdapter class which will extends BaseAdapter. Some default methods of BaseAdapter will help you to set images to GalleryView. Take a look at ImageAdapter class given below.

ImageAdapter.java

package com.example.galleryview;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter{

 Context context;
 int[] images = {R.drawable.image,R.drawable.image1,
   R.drawable.image2,R.drawable.image3,
   R.drawable.image4,R.drawable.image5,
   R.drawable.image6,R.drawable.image7,};
 
 public ImageAdapter(Context c)
 {
  this.context = c;
 }
 
 
 public int getCount() {
  // TODO Auto-generated method stub
  return images.length;
 }

 public Object getItem(int arg0) {
  // TODO Auto-generated method stub
  return null;
 }

 public long getItemId(int arg0) {
  // TODO Auto-generated method stub
  return 0;
 }

 public View getView(int position, View arg1, ViewGroup arg2) {
  // TODO Auto-generated method stub
  
  ImageView image = new ImageView(context);
  image.setImageResource(images[position]);
  
  return image;
 }
}

First I have created Context object and an array of IDs of images. In constructor will set value to context object. The below four methods inherit from BaseAdapter.

• Public int getCount();
  • This method will return how many images are there in an array.
• public Object getItem(int arg0)
  • This method will return an Object.
• public long getItemId(int arg0)
  • This method will return ID of image.
• public View getView(int position, View arg1, ViewGroup arg2)
  • This method will return an ImageView.

The above methods of ImageAdapter class will work as a source of GalleryView. GalleryView is nothing but a collection of Images. You just need to create ImageView objects as many as images you want to keep in GalleryView and finally you just put it in horizontal list which is your GalleryView.

The getView() method will return one by one images to the activity class where GalleryView physically located. Look at below code.

ImageView image = new ImageView(context);

This line will create an ImageView who's context is your activity class. The method getView() actually return image which need to set on GalleryView.

After implementing both java file and an XML, you'll get something like below.