Creating image gallery

19

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

19 Responses

  1. carlos says:

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

  2. Sushant says:

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

  3. Wilsharo Scott says:

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

  4. Sushant says:

    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.

  5. KEVIN says:

    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!

  6. Sushant says:

    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.

  7. Mike says:

    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!

  8. Sharma says:

    is this applicable in android above than 2.3.3 ?
    kindly reply

  9. Roseman says:

    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.

  10. ranaomair says:

    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.

  11. ranaomair says:

    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.

  12. Arwa says:

    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.

  13. Paul says:

    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.

  14. neema says:

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

  15. Kmailia says:

    hi,

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

    Thanks,

  16. Suleyman says:

    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.

  17. supercool says:

    does not work
    :(

    MfG
    supercool3

  18. Smiley says:

    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


9 − = three

Proudly designed by Theme Junkie.