Programming Tutorials

Gallery sample program in Android

By: Ashley in Android Tutorials on 2011-07-03  

This sample android program shows you how to use Gallery in Android. In this program a listof images is shown as a gallery. When you click on the list, the selected item index is shown on the text view. You can use this ImageAdapter widget and the Gallery object together with the onListItemClick() method to determine the selected index and process accordingly. Remember to copy all your images in your res/drawable folder.

The GalleryDemo.java file is as follows:

package com.javasamples;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemSelectedListener;

public class GalleryDemo extends Activity {


	TextView mySelection;
	Gallery myGallery;
	@Override
	public void onCreate(Bundle icicle) {
		super.onCreate(icicle);
		setContentView(R.layout.main);
		mySelection = (TextView) findViewById(R.id.mySelection);		
		
		// Bind the gallery defined in the main.xml
		// Apply a new (customized) ImageAdapter to it.

		myGallery = (Gallery) findViewById(R.id.myGallery);

		myGallery.setAdapter(new ImageAdapter(this));
		
		myGallery.setOnItemSelectedListener(new OnItemSelectedListener() {

			public void onItemSelected(AdapterView<?> parent, View v,
					int position, long id) {
				mySelection.setText(" selected option: " + position );
				
			}

			public void onNothingSelected(AdapterView<?> parent) {
				mySelection.setText("Nothing selected");
				
			}


		});
	}// onCreate

	public class ImageAdapter extends BaseAdapter {
		/** The parent context */
		private Context myContext;
		// Put some images to project-folder: /res/drawable/
		// format: jpg, gif, png, bmp, ...
		private int[] myImageIds = { R.drawable.image1, R.drawable.image2,
				       R.drawable.image3, R.drawable.mbl1 };

		/** Simple Constructor saving the 'parent' context. */
		public ImageAdapter(Context c) {
			this.myContext = c;
		}

		// inherited abstract methods - must be implemented
		// Returns count of images, and individual IDs
		public int getCount() {
			return this.myImageIds.length;
		}

		public Object getItem(int position) {
			return position;
		}

		public long getItemId(int position) {
			return position;
		}
		// Returns a new ImageView to be displayed,
		public View getView(int position, View convertView, 
				ViewGroup parent) {

			// Get a View to display image data 					
			ImageView iv = new ImageView(this.myContext);
			iv.setImageResource(this.myImageIds[position]);

			// Image should be scaled somehow
			//iv.setScaleType(ImageView.ScaleType.CENTER);
			//iv.setScaleType(ImageView.ScaleType.CENTER_CROP);			
			//iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
			//iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
			//iv.setScaleType(ImageView.ScaleType.FIT_XY);
			iv.setScaleType(ImageView.ScaleType.FIT_END);
			
			// Set the Width & Height of the individual images
			iv.setLayoutParams(new Gallery.LayoutParams(95, 70));

			return iv;
		}
	}// ImageAdapter
}// AndDemoUI

The output of this program will be as shown in the android emulator below.

The main.xml file in your res/layout folder is as follows:

<?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="SDK1.5  /samples/.../view/Gallery1.java" 
    />
    <TextView  
    android:id="@+id/mySelection" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:background="#ff0000ff"
    android:textSize="20px" android:textStyle="bold"/>  
<Gallery 
        android:id="@+id/myGallery" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="bottom" 
        
/> 
</LinearLayout>