Gallery in Android

The Gallery is a view that shows items (such as images) in a center-locked, horizontal scrolling list.

The following example shows you how to use the Gallery view to display a set of images.

Using the Gallery View

1 . Using Eclipse, create a new Android project

2 . Modify the main.xml file as shown in bold:

<?xml ​version=”1.0”​encoding=”utf-8”?>
<LinearLayout​
xmlns:android=”http://schemas.android.com/apk/res/android”
​​​​android:orientation=”vertical”
​​​​android:layout_width=”fill_parent” ​
​​​android:layout_height=”fill_parent”​>

<TextView ​​​​
android:layout_width=”fill_parent”
​​​​android:layout_height=”wrap_content” ​​​​
android:text=”Images of San Francisco” />

<Gallery
​​​​android:id=”@+id/gallery1”
​​​​android:layout_width=”fill_parent” ​​
​​android:layout_height=”wrap_content” />

<ImageView ​​​
​android:id=”@+id/image1” ​
​​​android:layout_width=”320px” ​​
​​android:layout_height=”250px” ​​​
​android:scaleType=”fitXY” />

</LinearLayout>

3 . Right-click on the res/values folder and select New ➪ File. Name the file attrs.xml. 

4 . Populate the attrs.xml file as follows: 

<?xml version=”1.0” encoding=”utf-8”?>
<resources>
​​​​<declare-styleable name=”Gallery1”>
​​​​​​​​<attr name=”android:galleryItemBackground” /> ​
​​​</declare-styleable>
</resources>

5 . Prepare a series of images and name them pic1.png, pic2.png, and so on.

6 . Add the following statements in bold to the MainActivity.java file:  

package com.emergingandroidtech.Gallery;

import android.app.Activity;
import android.os.Bundle;

import android.content.Context;
import android.content.res.TypedArray;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {   
    //---the images to display---
    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3,
            R.drawable.pic4,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7                   
    };
   
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        Gallery gallery = (Gallery) findViewById(R.id.gallery1);
       
        gallery.setAdapter(new ImageAdapter(this));       
        gallery.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id)
            {               
                Toast.makeText(getBaseContext(),
                        "pic" + (position + 1) + " selected",
                        Toast.LENGTH_SHORT).show();
               
                //---display the images selected---
                ImageView imageView = (ImageView) findViewById(R.id.image1);               
                imageView.setImageResource(imageIDs[position]);
            }
        });
    }
   
    public class ImageAdapter extends BaseAdapter
    {
        private Context context;
        private int itemBackground;

        public ImageAdapter(Context c)
        {
            context = c;
            //---setting the style---
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
            itemBackground = a.getResourceId(
                R.styleable.Gallery1_android_galleryItemBackground, 0);
            a.recycle();                   
        }

        //---returns the number of images---
        public int getCount() {
            return imageIDs.length;
        }
       
        //---returns the ID of an item---
        public Object getItem(int position) {
            return position;
        }           
       
        //---returns the ID of an item---        
        public long getItemId(int position) {
            return position;
        }
 
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(imageIDs[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
            imageView.setBackgroundResource(itemBackground);
            return imageView;
        }
    }   
}

7 . Shows the Gallery view displaying the series of images. 

8 . You can swipe the images to view the entire series of images. Observe that as you click on an image, the Toast class will display its name.



9 . To display the selected image in the ImageView, add the following statements in bold to the MainActivity.java file:

​​​​/**​Called ​when​ the ​activity ​is ​first ​created.​*/
​​​​@Override
​​​​public ​void​ onCreate(Bundle​savedInstanceState)
​{
​​​​​​​​super.onCreate(savedInstanceState);
​​​​​​​​setContentView(R.layout.main); ​​​​​​​​
​​​​​​​​Gallery ​gallery​=​(Gallery)​findViewById(R.id.gallery1); ​​​​​​​​
​​​​​​​​gallery.setAdapter(new​ImageAdapter(this));
​​​​​​​​gallery.setOnItemClickListener(new​OnItemClickListener() ​​
​​​​​​{ ​
​​​​​​​​​​​public ​void ​onItemClick(AdapterView<?> ​parent,​View ​v, ​​​​​​​​​​​​int ​position,​long ​id)
​​​​​​​​​​​​{ ​
​​​​​​​​​​​​​​​Toast.makeText(getBaseContext(),​ ​​​​​​​​​​​​​​​​​​​​​​​​“pic”​+​(position​+​1)​+​“​selected”, ​​​​​​​​​​​​​​​​​​​​​​​​Toast.LENGTH_SHORT).show();
​​​​​​​​​​​​​​​​
//---display the images selected---
​​​​​​​​​​​​​​​​ImageView imageView = (ImageView) findViewById(R.id.image1); ​​​​​​​​​​​​​​​​imageView.setImageResource(imageIDs[position]); ​​​
​​​​​​​​​} ​
​​​​​​​});
​​​​}

10 . This time, you will see the image selected in the ImageView.