Gallery sample program in Android

By: Ashley Viewed: 171 times  Printer Friendly Format    


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>



Most Viewed Articles (in Android )

Latest Articles (in Android)

Comment on this tutorial

Subscribe to Tutorials

Related Tutorials

Archived Comments

1. Hi,
I'm new one for android, i will devel

View Tutorial          By: Ragupathy at 2011-09-29 08:12:53

2. plz can u give me code for database connectivity f
View Tutorial          By: nilam at 2012-03-15 12:54:07

3. Actually in gallery example the images can be move
View Tutorial          By: santu at 2013-02-16 12:40:29

4. How can i add text under this all images
View Tutorial          By: jana at 2013-07-09 04:32:38

5. Hello,
how to use tjis tut for load image f

View Tutorial          By: zero at 2013-10-30 11:45:33

6. Nice Example.

You can also follow m

View Tutorial          By: Shriyanshu Jain at 2015-03-16 09:46:35

7. Aw, this was a really good post. Taking the time a
View Tutorial          By: email advertising at 2017-07-18 20:01:28

8. I got thi web site from my pal who told
me

View Tutorial          By: Lumis En barcelona at 2017-08-08 09:39:25