Android Gallery is a View commonly used to display items in a horizontally scrolling list that locks the current selection at the center. In this tutorial we’ll display a horizontal list of images and when a user clicks an image, it will be displayed in the center of the screen.
Table of Contents
Android Gallery View Overview
- The items of Gallery are populated from an Adapter, similar to
ListView
, in whichListView
items were populated from an Adapter - We need to create an Adapter class which extends
BaseAdapter
class and override getView() method - getView() method called automatically for all items of Gallery
The layout for the Gallery is defined as follows :
<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
It belongs to android.widget.Gallery class. However this class is deprecated now.
Project Structure
Code
The layout of the MainActivity
is given below:
main.xml
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Gallery
android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/imageView"
android:layout_marginTop="100dp"
android:layout_width="250dp"
android:layout_gravity="center_horizontal"
android:layout_height="250dp"
android:src="@drawable/alarm" />
</LinearLayout>
The android:src points to the first image from the left in the gallery.
The MainActivity.java
is given below:
package com.journaldev.galleryview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Gallery;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
ImageView selectedImage;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery gallery = (Gallery) findViewById(R.id.gallery);
selectedImage=(ImageView)findViewById(R.id.imageView);
gallery.setSpacing(1);
final GalleryImageAdapter galleryImageAdapter= new GalleryImageAdapter(this);
gallery.setAdapter(galleryImageAdapter);
gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
// show the selected Image
selectedImage.setImageResource(galleryImageAdapter.mImageIds[position]);
}
});
}
}
We need to create the GalleryImageAdapter class which extends the BaseAdapter class. This will bind to the Gallery view with a series of ImageView views. The BaseAdapter class will work as a bridge between an AdapterView and also the data source that feeds data into it.
For the GalleryImageAdapter class, following methods are implemented:
- getCount()
- getItem()
- getItemId()
- getView()
The GalleryImageAdapter class is given below:
package com.journaldev.galleryview;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
public class GalleryImageAdapter extends BaseAdapter
{
private Context mContext;
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;
}
public Integer[] mImageIds = {
R.drawable.alarm,
R.drawable.explore,
R.drawable.language,
R.drawable.lock,
R.drawable.print,
R.drawable.rotation_3d,
R.drawable.spellcheck,
R.drawable.redeem
};
}
The GIF below depict the output of the project. They display the ImageView with the image of the corresponding thumbnail from the GalleryView.
Note: GalleryView is deprecated now. The alternatives include HorizontalScrollView and ViewPager from the support library. The best alternative way is to use ViewPager with an ImageView in its fragment layout.
This brings an end to this tutorial. You can download the final Android GalleryView Project from the below link:
Hello, I’m getting an error!
java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.widget.Gallery.setAdapter(android.widget.SpinnerAdapter)’ on a null object reference
How to share the images using a button?
Hi!
Great example. But I can’t understand the logic behind long ago deprecated widget Gallery :O
Since it’s deprecated, you don’t need to 🙂
Thank you..!!
Sir this example. also
I have create Dynamic Gallary, so How to Create gallery images show on this app..?
Thankyou so much sir for this extremely valuable tutorial
Its possible launch time left to right?
hi Sir, why gallery image app launch time show center to right?. then scroll time its comes to left