A android.widget.Gallery - Example

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

A android.widget.Gallery - Example

Postby 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:
Image


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 ]
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 ]
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.031 seconds, using GeSHi 1.0.8.4


2.) The basic setup of the ImageAdapter
Syntax: [ Download ] [ Hide ]
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 ]
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.036 seconds, using GeSHi 1.0.8.4


Thats it ;)


Regards,
plusminus
Last edited by plusminus on Sat Dec 22, 2007 5:57 pm, edited 1 time in total.
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Top

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

Sample from SDK ;)Btw, cool widget, very useful :)
JQ Soft web page:
[b][url=http://jqsoft.ru/]http://jqsoft.ru/[/url][/b]
My proffesional blog: [b][url=http://maximyudin.blogspot.com]http://maximyudin.blogspot.com[/url][/b]
Facebook: [b][url=http://www.facebook.com/maxim.yudin]http://www.facebook.com/maxim.yudin[/url][/b]
User avatar
tum0rc0re
Senior Developer
Senior Developer
 
Posts: 158
Joined: Sun Nov 25, 2007 7:15 am
Location: Moscow, Russia

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

Hello tum0rc0re,

almost from the SDK with comments and some slight changes.

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby 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
Last edited by daroN on Thu Dec 20, 2007 11:56 pm, edited 1 time in total.
daroN
Junior Developer
Junior Developer
 
Posts: 15
Joined: Fri Dec 14, 2007 7:58 pm

Postby 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
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby 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
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Top

Postby 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! :)
daroN
Junior Developer
Junior Developer
 
Posts: 15
Joined: Fri Dec 14, 2007 7:58 pm

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

that all can we do by xml file????and how???
rmeph
Senior Developer
Senior Developer
 
Posts: 121
Joined: Mon Dec 10, 2007 1:54 pm
Location: India

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

hi ,

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

Regards,
Soniya
soniya
Senior Developer
Senior Developer
 
Posts: 111
Joined: Mon Jan 14, 2008 1:52 pm
Location: india

Postby 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
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

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

hi,

actually i want use image in background and then draw 2 roundrect on image .on first roundrect use simple image and on second roundrect use that imageadapter ....for that we need canvas ..............it's possible canvas and ImageAdapter use in same class?? and how??
and 1 more question is that imagesadpater i want use according to roundrect how to set layout of image???....


Regards,
Soniya
soniya
Senior Developer
Senior Developer
 
Posts: 111
Joined: Mon Jan 14, 2008 1:52 pm
Location: india

Postby 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 ?? :(
rmeph
Senior Developer
Senior Developer
 
Posts: 121
Joined: Mon Dec 10, 2007 1:54 pm
Location: India

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

hi,
plz tel me if u have any idea how to do that?

Regards,
Soniya
soniya
Senior Developer
Senior Developer
 
Posts: 111
Joined: Mon Jan 14, 2008 1:52 pm
Location: india

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

how to solved that problem

my class extends view class

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class demo2 extends View{
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


in constructor we use


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public demo2(Context context) {
  2.  
  3.                         // TODO Auto-generated constructor stub
  4.  
  5.                         super(context);
  6.  
  7.                          ctx = context;
  8.  
  9.               this.setBackground(getResources().getDrawable(R.drawable.b));
  10.  
  11. }
Parsed in 0.036 seconds, using GeSHi 1.0.8.4



in OnDraw method we draw round rect...... on second round rect we use imageadapter...we that code

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. protected void onDraw(Canvas canvas) {
  2.  
  3.                
  4.  
  5.  mCanvas.drawRoundRect(new RectF(10,10,(screen_wid-10),screen_hei/5), 5, 5, mPaint);
  6.  
  7.                           mCanvas.drawRoundRect(new RectF(10,screen_hei/5+10,(screen_wid-10),screen_hei-30), 5, 5, mPaint);
  8.  
  9.  ((Gallery) findViewById(R.id.gallery)).setAdapter(new ImageAdapter(this));
  10.  
  11.  
  12.  
  13. }
Parsed in 0.037 seconds, using GeSHi 1.0.8.4



but "new ImageAdapter(this)" show error "Change constructor ImageAdapter(Context)" how to sloved it?

i want round rect and imageadapter use single screen???how to do that???
plz tel me???
soniya
Senior Developer
Senior Developer
 
Posts: 111
Joined: Mon Jan 14, 2008 1:52 pm
Location: india

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

Hello soniya,

the following should work:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  ((Gallery) findViewById(R.id.gallery)).setAdapter(new ImageAdapter(this.ctx));
Parsed in 0.041 seconds, using GeSHi 1.0.8.4


Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Top
Next

Return to Novice Tutorials

Who is online

Users browsing this forum: Google Feedfetcher and 9 guests