Gallery with remote Images

by plusminus » Sat Feb 02, 2008 12:48 pm

android.widget.Gallery with remote Images

What you learn: You will learn how to use the Gallery-Widget (android.widget.Gallery) to display a remote images.

Problems/Questions: Write them right below...

Difficulty: 1 of 5

Read before: :src: android.widget.Gallery - Example because this tutorial is differing just in some lines.

What it will look like:

Description: The only real difference to the :src: android.widget.Gallery - Example-Tutorial is a single function in our Custom ImageAdapter. Before we were loading the images from our project resources with this line:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. i.setImageResource(this.myImageIds[position]);

Parsed in 0.029 seconds, using GeSHi 1.0.8.4

What we'll do now instead is the following:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1.         /** URL-Strings to some remote images. */
2.         private String[] myRemoteImages = {
3.                         "http://www.anddev.org/images/tiny_tutheaders/weather_forecast.png",
4.                         "http://www.anddev.org/images/tiny_tutheaders/cellidtogeo.png",
5.                         "http://www.anddev.org/images/tiny_tutheaders/droiddraw.png"
6.         };
7.         //...
8.  
9.         public View getView(int position, View convertView, ViewGroup parent) {
10.             ImageView i = new ImageView(this.myContext);
11.             try {
12.                                 /* Open a new URL and get the InputStream to load data from it. */
13.                                 URL aURL = new URL(myRemoteImages[position]);
14.                                 URLConnection conn = aURL.openConnection();
15.                                 conn.connect();
16.                                 InputStream is = conn.getInputStream();
17.                                 /* Buffered is always good for a performance plus. */
18.                                 BufferedInputStream bis = new BufferedInputStream(is);
19.                                 /* Decode url-data to a bitmap. */
20.                                 Bitmap bm = BitmapFactory.decodeStream(bis);
21.                                 bis.close();
22.                                 is.close();
23.                                 /* Apply the Bitmap to the ImageView that will be returned. */
24.                                 i.setImageBitmap(bm);
25.                         } catch (IOException e) {
26.                                 i.setImageResource(R.drawable.error);
27.                                 Log.e("DEBUGTAG", "Remtoe Image Exception", e);
28.                         }
29.         //...

Parsed in 0.034 seconds, using GeSHi 1.0.8.4

Thats it

Full source:


"/res/layout/main.xml":

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. <Gallery id="@+id/gallery"
8.        android:layout_width="fill_parent"
9.        android:layout_height="wrap_content"
10.        android:gravity="bottom"
11. />
12. </LinearLayout>

Parsed in 0.002 seconds, using GeSHi 1.0.8.4

"/src/your_package_structure/GalleryExample.java":

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. package org.anddev.android.galleryexample;
2.  
3. import java.io.BufferedInputStream;
4. import java.io.IOException;
5. import java.io.InputStream;
6. import java.net.URL;
7. import java.net.URLConnection;
8.  
9. import android.app.Activity;
10. import android.content.Context;
11. import android.graphics.Bitmap;
12. import android.graphics.BitmapFactory;
13. import android.os.Bundle;
14. import android.util.Log;
15. import android.view.View;
16. import android.view.ViewGroup;
17. import android.widget.BaseAdapter;
18. import android.widget.Gallery;
19. import android.widget.ImageView;
20.  
21. public class GalleryExample extends Activity {
22.     /** Called when the activity is first created. */
23.     @Override
24.     public void onCreate(Bundle icicle) {
25.         super.onCreate(icicle);
26.         setContentView(R.layout.main);
27.  
28.         /* Find the gallery defined in the main.xml
29.          * Apply a new (custom) ImageAdapter to it. */
30.         ((Gallery) findViewById(R.id.gallery))
31.                         .setAdapter(new ImageAdapter(this));
32.     }
33.  
34.     public class ImageAdapter extends BaseAdapter {
35.         /** The parent context */
36.         private Context myContext;
37.  
38.         /** URL-Strings to some remote images. */
39.         private String[] myRemoteImages = {
40.                         "http://www.anddev.org/images/tiny_tutheaders/weather_forecast.png",
41.                         "http://www.anddev.org/images/tiny_tutheaders/cellidtogeo.png",
42.                         "http://www.anddev.org/images/tiny_tutheaders/droiddraw.png"
43.         };
44.        
45.         /** Simple Constructor saving the 'parent' context. */
46.         public ImageAdapter(Context c) { this.myContext = c; }
47.  
48.         /** Returns the amount of images we have defined. */
49.         public int getCount() { return this.myRemoteImages.length; }
50.  
51.         /* Use the array-Positions as unique IDs */
52.         public Object getItem(int position) { return position; }
53.         public long getItemId(int position) { return position; }
54.  
55.         /** Returns a new ImageView to
56.          * be displayed, depending on
57.          * the position passed. */
58.         public View getView(int position, View convertView, ViewGroup parent) {
59.             ImageView i = new ImageView(this.myContext);
60.  
61.             try {
62.                                 /* Open a new URL and get the InputStream to load data from it. */
63.                                 URL aURL = new URL(myRemoteImages[position]);
64.                                 URLConnection conn = aURL.openConnection();
65.                                 conn.connect();
66.                                 InputStream is = conn.getInputStream();
67.                                 /* Buffered is always good for a performance plus. */
68.                                 BufferedInputStream bis = new BufferedInputStream(is);
69.                                 /* Decode url-data to a bitmap. */
70.                                 Bitmap bm = BitmapFactory.decodeStream(bis);
71.                                 bis.close();
72.                                 is.close();
73.                                 /* Apply the Bitmap to the ImageView that will be returned. */
74.                                 i.setImageBitmap(bm);
75.                         } catch (IOException e) {
76.                                 i.setImageResource(R.drawable.error);
77.                                 Log.e("DEBUGTAG", "Remtoe Image Exception", e);
78.                         }
79.            
80.             /* Image should be scaled as width/height are set. */
81.             i.setScaleType(ImageView.ScaleType.FIT_CENTER);
82.             /* Set the Width/Height of the ImageView. */
83.             i.setLayoutParams(new Gallery.LayoutParams(150, 150));
84.             return i;
85.         }
86.  
87.         /** Returns the size (0.0f to 1.0f) of the views
88.          * depending on the 'offset' to the center. */
89.         public float getScale(boolean focused, int offset) {
90.                 /* Formula: 1 / (2 ^ offset) */
91.             return Math.max(0, 1.0f / (float)Math.pow(2, Math.abs(offset)));
92.         }
93.     }
94. }

Parsed in 0.046 seconds, using GeSHi 1.0.8.4

Regards,
plusminus

| Android Development Community / Tutorials

by cabernet1976 » Sun Feb 03, 2008 4:24 am

by plusminus » Sun Feb 03, 2008 11:06 am

| Android Development Community / Tutorials

Images

by baskar » Mon Feb 04, 2008 5:31 am

by plusminus » Mon Feb 04, 2008 10:24 am

Hello baskar,

loading bitmaps to the emulator is done in the :src: Loading images from remote server/web-Tutorial.

Saving to file instead of displaying in ImageView is just one line away.

Regards,
plusminus

| Android Development Community / Tutorials

by Jesmiatka » Mon May 05, 2008 2:26 pm

by Jesmiatka » Tue May 06, 2008 10:11 am

getScale()

by Txorl » Sat Jan 03, 2009 10:08 pm

Re: Gallery with remote Images

by ernesto » Tue Feb 03, 2009 9:59 am

plusminus wrote:

android.widget.Gallery with remote Images

What you learn: You will learn how to use the Gallery-Widget (android.widget.Gallery) to display a remote images.

Regards,
plusminus

Hey plusminus,

thanks for the tutorial. Little mistake I found: "You will learn how to use the Gallery-Widget android.widget.Gallery to display a remote image" (without the s at the ending, right? )

Keep up the good work!

by dhaiwat » Fri Sep 18, 2009 6:11 am

Attachments

Httprequest.zip

to resize and convert into byte the image

(840 Bytes) Downloaded 462 times

by rogerdodger » Sat Dec 05, 2009 5:20 pm

Re: getScale()

by garywang » Thu Jan 21, 2010 5:39 am

Null Pointer

by rogerdodger » Thu Jan 21, 2010 6:45 pm

R.drawable.error

by sharma33 » Wed Mar 10, 2010 1:44 pm

left align gallery view

by saamyandroid » Thu Mar 18, 2010 6:08 am