Creating Image Gallery

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:

[code lang=”xml”]

android:id="@+id/gallery" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
[/code]

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

[code lang=”xml”]

[/code]

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:

[code lang=”java”]

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;
}
}
}
[/code]

Output – The final output:

Comments 19

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

      [code lang=”java”]
      ImageView imageview = (ImageView) findViewById(R.id.ImageView01);
      imageview.setImageResource(mImageIds[position]);
      [/code]

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

      [code lang=”xml”]
      <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>
      [/code]

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

  1. 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!

  2. 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.

    [code lang=”xml”]
    <resources>
    <declare-styleable name="HelloGallery">
    <attr name="android:galleryItemBackground" />
    </declare-styleable>
    </resources>
    [/code]

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

    Thanks.

  3. 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!

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">