Creating image gallery

9

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:

Did you enjoy this article?
Share
the
Love
Get Free Updates
  • carlos

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

  • http://edumobile.org Sushant

    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

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

  • http://edumobile.org Sushant

    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&quot;
    	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

    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!

  • http://edumobile.org Sushant

    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.

  • Sharma

    is this applicable in android above than 2.3.3 ?
    kindly reply

  • Arwa

    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

    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.

Proudly designed by Theme Junkie.