Creating image gallery

The project describes how to implement gallery for your application.

Underlying Algorithm:

Basic description of algorithm in step by step form:

1.) Create a Project GalleryExample

2.) Open and insert following in main.xml:


<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/gallery" android:layout_width="fill_parent"
	android:layout_height="wrap_content" />

3.) Create,Open and insert following in your res/values/attrs.xml:


<resources>
    <declare-styleable name="HelloGallery">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

4.) Add some image in your drawable folder.

5.) Run the application.

Steps to Create:

1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. GalleryExample. Enter following information:

Project name: GalleryExample
Build Target: Android 2.3.3
Application name: GalleryExample
Package name: org.example.GalleryExample
Create Activity: GalleryExample

On Clicking Finish GalleryExample code structure is generated with the necessary Android Packages being imported along with GalleryExample.java. GalleryExample class will look like following:


package org.example.GalleryExample;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
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 GalleryExample extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Gallery g = (Gallery) findViewById(R.id.gallery);
        g.setAdapter(new ImageAdapter(this));

        g.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(@SuppressWarnings("rawtypes") AdapterView parent, View v, int position, long id) {
                Toast.makeText(GalleryExample.this, "" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }

public class ImageAdapter extends BaseAdapter {
    int mGalleryItemBackground;
    private Context mContext;

    private Integer[] mImageIds = {
            R.drawable.icon,
            R.drawable.icon,
            R.drawable.icon
    };

    public ImageAdapter(Context c) {
        mContext = c;
        TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);
        mGalleryItemBackground = a.getResourceId(
                R.styleable.HelloGallery_android_galleryItemBackground, 0);
        a.recycle();
    }

    public int getCount() {
        return mImageIds.length;
    }

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

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView i = new ImageView(mContext);

        i.setImageResource(mImageIds[position]);
        i.setLayoutParams(new Gallery.LayoutParams(150, 100));
        i.setScaleType(ImageView.ScaleType.FIT_XY);
        i.setBackgroundResource(mGalleryItemBackground);

        return i;
    }
}
}

Output – The final output:

About the Author

Leave a Reply 19 comments

carlos - April 3, 2011 Reply

how do you create the res/values/attrs.xml folder??

    Sushant - April 7, 2011 Reply

    res/values folder is automatically created when you create project. And you can create a new android xml there with name attrs.xml.

Wilsharo Scott - May 17, 2011 Reply

How do you get it to display the actual image, instead of a toast message?

    Sushant - May 18, 2011 Reply

    Just replace following in onItemClick() instead of Toast message:

      ImageView imageview = (ImageView) findViewById(R.id.ImageView01);
                    imageview.setImageResource(mImageIds[position]); 
    

    and add a ImageView in your main.xml as below:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	android:orientation="vertical" android:layout_width="fill_parent"
    	android:layout_height="fill_parent">
    	<Gallery android:id="@+id/Gallery01" android:layout_width="fill_parent"
    		android:layout_height="wrap_content"></Gallery>
    	<ImageView android:id="@+id/ImageView01"
    		android:layout_gravity="center_vertical|center_horizontal"
    		android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
    </LinearLayout>
    

    Also don’t forget to define resource array “mImageIds” in your activity instead of in imageadapter class.

KEVIN - July 11, 2011 Reply

TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);
This line gives me an error, saying it wants to create an undeclared method..?
I’ve seen a lot of tutorials but all of the code is the same and it still won’t work for me.
Any idea why? thanks!

Sushant - July 12, 2011 Reply

Hello Kevin,

Either you havn’t imported “import android.content.res.TypedArray;” or you haven’t declared styleable resource in your attrs.xml file as below.

<resources>
    <declare-styleable name="HelloGallery">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

These two are possible causes of the error your are getting. Please try to clean your project and recompile after applying above suggestions.

Thanks.

Mike - December 5, 2011 Reply

There are 400 examples of this gallery on the net including to original a Developer.Android.com called “Hello Image Gallery”, Hello!!! If you’re going to put stuff up on the Net, why not extend on it and not clutter it!

Sharma - April 11, 2012 Reply

is this applicable in android above than 2.3.3 ?
kindly reply

Roseman - June 1, 2012 Reply

Thanks for the code. It nearly works but I can’t work out how to:

‘Define resource array “mImageIds” in your activity instead of in imageadapter class.’

Could you should me how to do that exactly – the alterations required.

Thanks a lot.

ranaomair - July 20, 2012 Reply

Would you please upload the code, as its not working, and there are many issues, in this.
you might didn’t mention, or you forgot, to write here.
sorry to say ,but its not fully described.

ranaomair - July 20, 2012 Reply

Would you please upload the code, as its not working, and there are many issues, in this.
you might didn’t mention, or you forgot, to write here.
sorry to say ,but its not fully described.

Arwa - August 29, 2012 Reply

The following classes could not be found:
– Gallery (Change to android.widget.Gallery, Fix Build Path, Edit XML)
it is giving me this error in the layout ! something wrong with inserting gallery.

Paul - October 17, 2012 Reply

It seems to work as long as i use the same image over and over. But if i reference different images in mImageIds I get an OutOfMemory error. Even in your screen shots you are showing the same image over and over.

neema - December 15, 2012 Reply

tnx, it was incredible.
edumobile has taught me so much.

Kmailia - December 20, 2012 Reply

hi,

how to avoid centering the select one.
just scrolling without focuses on item.

Thanks,

Suleyman - March 10, 2013 Reply

Hello everyone,

Thank you for helping, all of the seem okay except R, all the errors come from R can’t be resolved to a variable.

Could you help me in this error.

Thank you.

supercool - July 24, 2013 Reply

does not work
:(

MfG
supercool3

Smiley - July 29, 2013 Reply

I’m a beginner in learning Android and i tried using the code provided for creating the image Gallery, but then there are errors whereby it keeps telling me that “the type Gallery depreciated”. What should i do? or is there any other way to solve it??
Thank you!

Leave a Reply: