A android.widget.Gallery - Example

by plusminus » Thu Dec 20, 2007 6:21 pm

android.widget.Gallery - Example

What you learn: You will learn how to use the Gallery-Widget (android.widget.Gallery) to display a series of images (/res/drawable/s).

Problems/Questions: Write them right below...

Difficulty: 1 of 5

What it will look like:

Description:
0.) Lets start with the XML-File which will result in the Screenshot shown above. It is very simple, just a TextView followed by a Gallery(with id: "gallery"):

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using xml Syntax Highlighting

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.    android:orientation="vertical"
4.    android:layout_width="fill_parent"
5.    android:layout_height="fill_parent"
6.    >
7. <TextView  
8.    android:layout_width="fill_parent"
9.    android:layout_height="wrap_content"
10.    android:text="GalleryExample - by anddev.org"
11.    />
12. <Gallery id="@+id/gallery"
13.        android:layout_width="fill_parent"
14.        android:layout_height="wrap_content"
15.        android:gravity="bottom"
16. />
17. </LinearLayout>

Parsed in 0.002 seconds, using GeSHi 1.0.8.4

1.) Now to the EntryPoint of all Activities, the onCreate(...) method. It loads the previously defined main.xml and applies an Adapter (ImageAdapter) to the Gallery.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. public class GalleryExample extends Activity {
2.     /** Called when the activity is first created. */
3.     @Override
4.     public void onCreate(Bundle icicle) {
5.         super.onCreate(icicle);
6.         setContentView(R.layout.main);
7.  
8.         /* Find the gallery defined in the main.xml
9.          * Apply a new (custom) ImageAdapter to it. */
10.         ((Gallery) findViewById(R.id.gallery))
11.                         .setAdapter(new ImageAdapter(this));
12.     }

Parsed in 0.030 seconds, using GeSHi 1.0.8.4

2.) The basic setup of the ImageAdapter

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1.     public class ImageAdapter extends BaseAdapter {
2.         /** The parent context */
3.         private Context myContext;
4.  
5.         /** All images to be displayed.
6.          * Put some images to project-folder:
7.          * '/res/drawable/uvw.xyz' .*/
8.         private int[] myImageIds = {
9.                         R.drawable.image_1,
10.                         R.drawable.image_2,
11.                         R.drawable.image_3,
12.                         R.drawable.image_4
13.         };
14.         /** Simple Constructor saving the 'parent' context. */
15.         public ImageAdapter(Context c) { this.myContext = c; }
16.  
17.         /** Returns the amount of images we have defined. */
18.         public int getCount() { return this.myImageIds.length; }
19.  
20.         /* Use the array-Positions as unique IDs */
21.         public Object getItem(int position) { return position; }
22.         public long getItemId(int position) { return position; }

Parsed in 0.033 seconds, using GeSHi 1.0.8.4

3.) The 'important' methods of the ImageAdapter

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1.         /** Returns a new ImageView to
2.          * be displayed, depending on
3.          * the position passed. */
4.         public View getView(int position, View convertView, ViewGroup parent) {
5.             ImageView i = new ImageView(this.myContext);
6.  
7.             i.setImageResource(this.myImageIds[position]);
8.             /* Image should be scaled as width/height are set. */
9.             i.setScaleType(ImageView.ScaleType.FIT_XY);
10.             /* Set the Width/Height of the ImageView. */
11.             i.setLayoutParams(new Gallery.LayoutParams(150, 150));
12.             return i;
13.         }
14.  
15.         /** Returns the size (0.0f to 1.0f) of the views
16.          * depending on the 'offset' to the center. */
17.         public float getScale(boolean focused, int offset) {
18.                 /* Formula: 1 / (2 ^ offset) */
19.             return Math.max(0, 1.0f / (float)Math.pow(2, Math.abs(offset)));
20.         }
21.     }
22. }

Parsed in 0.035 seconds, using GeSHi 1.0.8.4

Thats it

Regards,
plusminus

| Android Development Community / Tutorials

by tum0rc0re » Thu Dec 20, 2007 8:45 pm

Sample from SDK Btw, cool widget, very useful

by plusminus » Thu Dec 20, 2007 9:16 pm

| Android Development Community / Tutorials

by daroN » Thu Dec 20, 2007 11:28 pm

hey nice tutorial! Is there a better way to locate the pictures? Is it possible to give the images
located in /res/drawable as a List to the myImageIds-Array?

That would be nice ...and i hope i made myself clear

greetz,
daroN

by plusminus » Thu Dec 20, 2007 11:44 pm

Hello daroN,

didn't fully understand you
Pls rewrite:

could one give the images from the content-path the myImageIds-Array

Regards,
plusminus

| Android Development Community / Tutorials

by plusminus » Fri Dec 21, 2007 12:21 am

Hey daroN,

you want to assign all images from /res/drawable with one line of code

have not seen a command like getResources().getALLDrawables(); yet. would be useful ^^

Regards,
plusminus

| Android Development Community / Tutorials

by daroN » Fri Dec 21, 2007 11:45 am

Yeah thats exactly what i was talking about! That would be very useful! Maybe something like that is coming in one of the next sdk-updates!

by rmeph » Mon Jan 14, 2008 11:45 am

by soniya » Mon Jan 14, 2008 2:42 pm

hi ,

can u tel me how do it using canvas class????

Regards,
Soniya

by plusminus » Mon Jan 14, 2008 5:38 pm

Hello,

rmeph wrote:that all can we do by xml file????and how???

you mean putting the images(drawables) already in the xml-file 'into' the Gallery

soniya wrote:hi ,

can u tel me how do it using canvas class????

Regards,
Soniya

Please be more specific!
I do not think it is the right solution to do animation-stuff on a Canvas (the Gallery uses some fade-effects ). If you do it without animation it is simply some listening to onClick and some callings to myDrawable.draw(myCanvas);

Regards,
plusminus

| Android Development Community / Tutorials

by soniya » Mon Jan 14, 2008 6:51 pm

by rmeph » Tue Jan 15, 2008 6:57 am

i want all work done in Xml file?
that all can we do on form?
can we use image on form ??

by soniya » Tue Jan 15, 2008 9:52 am

by soniya » Tue Jan 15, 2008 2:47 pm

by plusminus » Wed Jan 16, 2008 12:03 am

| Android Development Community / Tutorials