GalleryView Example

In our GalleryView Example we have populated the Gallery with images.

The images will be shown in horizontal list, when user selects/click on an image , the selected Image will be
shown in center of the screen. (See the Screenshot below)
Handle touch/click event on Gallery:
We need to add click Listener to gallery in order to handle the touch event on gallery.

main.xml
We have a gallery and an ImageView, we will show the User selected image in ImageView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

<ImageView
android:id="@+id/imageView1"
android:layout_marginTop="100dp"
android:layout_width="250dp"
android:layout_gravity="center_horizontal"
android:layout_height="250dp"
android:src="@drawable/image1" />
</LinearLayout>

MainActivity
public class MainActivity extends Activity
{
ImageView selectedImage;
private Integer[] mImageIds = {
R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
R.drawable.image4,
R.drawable.image5,
R.drawable.image6,
R.drawable.image7,
R.drawable.image8
};
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery gallery = (Gallery) findViewById(R.id.gallery1);
selectedImage=(ImageView)findViewById(R.id.imageView1);
gallery.setSpacing(1);
gallery.setAdapter(new GalleryImageAdapter(this));
// clicklistener for Gallery
gallery.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
Toast.makeText(MainActivity.this, "Your selected position = " + position, Toast.LENGTH_SHORT).show();
// show the selected Image
selectedImage.setImageResource(mImageIds[position]);
}
});
}
}

GalleryImageAdapter
public class GalleryImageAdapter extends BaseAdapter
{
private Context mContext;
private Integer[] mImageIds = {

R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
R.drawable.image4,
R.drawable.image5,
R.drawable.image6,
R.drawable.image7,
R.drawable.image8
};
public GalleryImageAdapter(Context context)
{
mContext = context;
}
public int getCount() {
return mImageIds.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}

// Override this method according to your need

public View getView(int index, View view, ViewGroup viewGroup)
{
// TODO Auto-generated method stub
ImageView i = new ImageView(mContext);
i.setImageResource(mImageIds[index]);
i.setLayoutParams(new Gallery.LayoutParams(200, 200));
i.setScaleType(ImageView.ScaleType.FIT_XY);
return i;
}
}

How to create a simple android Gallery View

Android provide a way to show photo (either from sdcards or on-line) in a specified manner. You can navigate and
see all photo. We do with help of android widget Gallery. Gallery is just like List View in which we bind the data using
Base Adapter . If want some depth knowledge about how to bind data using adapter then see ListView with Image
and Text Article.
Gallery is deprecated from Jelly bean. And they suggest to use horizontally scrolling widgets include
Horizontal Scroll-view and View Pager from the support library.Wait soon i will post about this also. But for
now we can use Gallery.

Step1) First create a new project

Step2 change your main.xml to 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" android:padding="5dp">
<Gallery
android:id="@+id/Gallery01"
android:layout_width="fill_parent"
android:layout_height="90dp"></Gallery>
<LinearLayout
android:id="@+id/ImageView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"></LinearLayout>
</LinearLayout>

Step3 change your main activity to as followspackage com.ahmad.samples.views;

import android.app.Activity;
import android.content.Context;

import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class GalleryViewAhmad extends Activity {

//These image should be store in your drawble folder under res.
Integer[] pics = { R.drawable.antartica1, R.drawable.antartica2,
R.drawable.antartica3, R.drawable.antartica4,
R.drawable.antartica5, R.drawable.antartica6,
R.drawable.antartica7, R.drawable.antartica8,
R.drawable.antartica9, R.drawable.antartica10 ,
R.drawable.antartica3, R.drawable.antartica4,
R.drawable.antartica5, R.drawable.antartica6,

R.drawable.antartica7, R.drawable.antartica8,
R.drawable.antartica9, R.drawable.antartica10 };
LinearLayout imageView;

/** Called when the activity is first created. */

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
try {
// InputStream in = (new URL("www.google.com").openStream());
} catch (Exception e) {
e.getMessage();
}
Gallery ga = (Gallery) findViewById(R.id.Gallery01);
ga.setAdapter(new ImageAdapter(this));

imageView = (LinearLayout) findViewById(R.id.ImageView01);

ga.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
Toast.makeText(

getBaseContext(),
"You have selected picture " + (arg2 + 1)
+ " of Antartica", Toast.LENGTH_SHORT).show();
try {
imageView.removeAllViews();
} catch (Exception e) {
e.getMessage();
}
TouchImageView touchImageView = new TouchImageView(
GalleryView.this);
touchImageView.setImageResource(pics[arg2]);
LayoutParams lp=new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
imageView.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
touchImageView.setLayoutParams(lp);
imageView.addView(touchImageView);
}

});
}
This is Base-Adapter class to bind view with Gallery-View

public class ImageAdapter extends BaseAdapter {

private Context ctx;

int imageBackground;
public ImageAdapter(Context c) {
ctx = c;
TypedArray ta = obtainStyledAttributes(R.styleable.Gallery1);
imageBackground = ta.getResourceId(
R.styleable.Gallery1_android_galleryItemBackground, 1);
ta.recycle();
}
@Override
public int getCount() {
return pics.length;
}
@Override
public Object getItem(int arg0) {
return arg0;
}
@Override
public long getItemId(int arg0) {
return arg0;
}
@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
ImageView iv = new ImageView(ctx);

iv.setImageResource(pics[arg0]);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
iv.setLayoutParams(new Gallery.LayoutParams(150, 120));
iv.setBackgroundResource(imageBackground);
return iv;
}
}
}

Android Gallery View :

In your application if you want display a series of images to the user, you can make use of the Gallery.The
Gallery is a view that shows items (such as images) in a center-locked, horizontal scrolling list.

How to Create Android Gallery View:

Gallery is used to show Views in a horizontal list, and user will select a view , User selected view
will be shown in center of the Horizontal list

The items of Gallery are get from an Adapter, just like ListView, in which ListView items are get
from an Adapter.

We need to make an Adapter class that extends BaseAdapter class and override getView()
method.

getView() method known as automatically for all items of Gallery

Solution Stuff :
1. For Android Gallery View Example, assume you have some images stored in the res/drawable-mdpi
folder of your project (see Figure).

2. Create an XML file named attrs.xml and store it in the res/values folder (see Figure).

3. Add this content to the attrs.xml file:

File: res/values/attrs.xml
<resources>
<declare-styleable name="MyGallery">

<attr name="android:galleryItemBackground" />

</declare-styleable>
</resources>
4. Open res/layout/activity_main.xml file and put this xml code it into file:
To use the Gallery, add the <Gallery> element in your UI, such as the activity_main.xml file:
File : res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="{relativePackage}.${activityClass}"
android:orientation="vertical" >
<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/image1"
android:layout_width="215dp"
android:layout_height="315dp"
android:layout_gravity="center_horizontal"
android:background="#cfcfcf"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:src="@drawable/pic1" />
</LinearLayout>
5. Open MainActivity.java file and add following JAVA code.
File : src/package-name/MainActivity.java
package androidinterview.com.androidgalleryview;
import
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.content.Context;
android.content.res.TypedArray;
android.os.Bundle;
android.view.View;
android.view.ViewGroup;
android.widget.AdapterView;
android.widget.AdapterView.OnItemClickListener;
android.widget.BaseAdapter;
android.widget.Gallery;
android.widget.ImageView;

import android.widget.Toast;
@SuppressWarnings("deprecation")
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
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Note that Gallery view is deprecated in Android 4.1--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;
// sets a grey background; wraps around the images
TypedArray a =obtainStyledAttributes(R.styleable.MyGallery);
itemBackground =
a.getResourceId(R.styleable.MyGallery_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.setLayoutParams(new Gallery.LayoutParams(100, 100));
imageView.setBackgroundResource(itemBackground);
return imageView;
}
}
}