Gallery with remote Images

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

Re: R.drawable.error

Postby ronhodge50000 » Mon Mar 22, 2010 5:15 pm

sharma33 wrote:Hey
I'm a beginner and I'm getting an error
R.drawable.error cannot be resolved
So I changed it to - R.drawable.icon because I could see icon in the drawable folders..
The error went away but when I run the code onto the emulator in the program all I see is the 'icon' image 3 times over
That means its going into the exception right?
Why?
Please tell me as soon as possible! Any help will be appreciated!



i try this tutorial and got the same thing and i am wondering why it displays error images instead of url
ronhodge50000
Freshman
Freshman
 
Posts: 2
Joined: Mon Mar 22, 2010 5:06 pm
Location: Scottsdale, az

Top

Postby frankie » Fri Apr 23, 2010 11:47 am

hi plusminus,

with the code i get an exception and prompts me to force close on the simulator.
here is my code

import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.net.URLConnection;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class imgs extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
//LinearLayout parent = new LinearLayout(this);
// RelativeLayout parent = new RelativeLayout(this);

// Gallery imgGal = new Gallery(this);
// parent.addView(imgGal,0);
((Gallery) findViewById(R.id.gallery))
.setAdapter(new ImageAdapter(this));
// imgGal.setAdapter(new ImageAdapter(this));

}

public class ImageAdapter extends BaseAdapter
{
/** The parent context */
private Context myContext;

/** URL-Strings to some remote images. */
private String[] myRemoteImages = {
"http://www.anddev.org/images/tiny_tutheaders/weather_forecast.png",
"http://www.anddev.org/images/tiny_tutheaders/cellidtogeo.png",
"http://www.anddev.org/images/tiny_tutheaders/droiddraw.png"
};

/** Simple Constructor saving the 'parent' context. */
public ImageAdapter(Context c) { this.myContext = c; }

/** Returns the amount of images we have defined. */
public int getCount() { return this.myRemoteImages.length; }

/* Use the array-Positions as unique IDs */
public Object getItem(int position) { return position; }
public long getItemId(int position) { return position; }

/** Returns a new ImageView to
* be displayed, depending on
* the position passed. */
public View getView(int position, View convertView, ViewGroup parent) {
ImageView i = new ImageView(this.myContext);

try {
/* Open a new URL and get the InputStream to load data from it. */
URL aURL = new URL(myRemoteImages[position]);
URLConnection conn = aURL.openConnection();
conn.connect();
InputStream is = conn.getInputStream();
/* Buffered is always good for a performance plus. */
BufferedInputStream bis = new BufferedInputStream(is);
/* Decode url-data to a bitmap. */
Bitmap bm = BitmapFactory.decodeStream(bis);
bis.close();
is.close();
/* Apply the Bitmap to the ImageView that will be returned. */
i.setImageBitmap(bm);
} catch (IOException e) {
// i.setImageResource(R.drawable.error);
Log.e("DEBUGTAG", "Remtoe Image Exception", e);
}

/* Image should be scaled as width/height are set. */
i.setScaleType(ImageView.ScaleType.FIT_CENTER);
/* Set the Width/Height of the ImageView. */
i.setLayoutParams(new Gallery.LayoutParams(150, 150));
return i;
}
}
}

kindly help

thanks
frankie
Junior Developer
Junior Developer
 
Posts: 11
Joined: Wed Apr 07, 2010 12:49 pm
Location: india

Re: Gallery with remote Images

Postby matsch10 » Wed Jun 16, 2010 8:48 am

Hi

Is it possible to use website elements instead of pictures?

EDIT:
To complete my question I add e mockup of what i mean... ;-)

in this gallery the resources in html are coming from a website.

Image


EDIT, 2nd:
Ok, I've found something very interesting. Seems to work well... ;-)
look http://www.inter-fuser.com/2010/02/android-coverflow-widget-v2.html


____
mat
Isn't it?
matsch10
Once Poster
Once Poster
 
Posts: 1
Joined: Fri May 14, 2010 8:51 am
Location: Berne

Re: Gallery with remote Images

Postby andrtuto » Wed Sep 29, 2010 8:21 pm

Hello

Thank you very much for the tutorial
I have a problem, when loading images from the web connection is always open, when I have 6 images slows.
As I can stop the connection?

bis.close () and is.close (); ... do not stop the connection
It use conn.connect (); to connect whith url. how I can stop the connection?


Thanks in advance, kind regards.

Sorry about my english :)
andrtuto
Freshman
Freshman
 
Posts: 6
Joined: Sun Aug 22, 2010 8:02 pm

Re: Gallery with remote Images

Postby blundell » Fri Oct 01, 2010 9:04 am

Of what type is your variable conn ?
User avatar
blundell
Master Developer
Master Developer
 
Posts: 1610
Joined: Tue Nov 18, 2008 12:58 pm
Location: UK

Re: Gallery with remote Images

Postby andrtuto » Fri Oct 01, 2010 1:32 pm

Hi blundell

thank you very much for your interest
conn variable is type URLConnection
I attached the code I use:

Code: Select all
    public View getView(int position, View convertView, ViewGroup parent) {
            ImageView i = new ImageView(this.myContext);

            try {
            /* Open a new URL and get the InputStream to load data from it. */
            URL aURL = new URL(myRemoteImages[position]);
            URLConnection conn = aURL.openConnection();
            conn.connect();
            InputStream is = conn.getInputStream();
            /* Buffered is always good for a performance plus. */
            BufferedInputStream bis = new BufferedInputStream(is);
            /* Decode url-data to a bitmap. */
            Bitmap bm = BitmapFactory.decodeStream(bis);
            bis.close();
            is.close();
            /* Apply the Bitmap to the ImageView that will be returned. */
            i.setImageBitmap(bm);
         } catch (IOException e) {
            i.setImageResource(R.drawable.error);
            Log.e("DEBUGTAG", "Remtoe Image Exception", e);
         }
           
            /* Image should be scaled as width/height are set. */
            i.setScaleType(ImageView.ScaleType.CENTER);
            /* Set the Width/Height of the ImageView. */
            i.setLayoutParams(new Gallery.LayoutParams(125, 125));
            return i;
        }

       
        /** Returns the size (0.0f to 1.0f) of the views
         * depending on the 'offset' to the center. */
        public float getScale(boolean focused, int offset) {
           /* Formula: 1 / (2 ^ offset) */
            return Math.max(0, 1.0f / (float)Math.pow(2, Math.abs(offset)));
        }
      
   }



Thanks and kind regards :)
andrtuto
Freshman
Freshman
 
Posts: 6
Joined: Sun Aug 22, 2010 8:02 pm

Top

Re: Gallery with remote Images

Postby blundell » Fri Oct 01, 2010 3:10 pm

I don't think it's to do with your code. You do everything correctly. Your phone decides if it closes the web connection or not. Sorry
User avatar
blundell
Master Developer
Master Developer
 
Posts: 1610
Joined: Tue Nov 18, 2008 12:58 pm
Location: UK

Re: Gallery with remote Images

Postby andrtuto » Fri Oct 01, 2010 7:24 pm

OK
Thankyou very much :)
I will continue studying:)

Kind regards
andrtuto
Freshman
Freshman
 
Posts: 6
Joined: Sun Aug 22, 2010 8:02 pm

Re: Gallery with remote Images

Postby silkuze » Tue Nov 09, 2010 10:09 am

Hey guys,

Thanks for this great tutorial, it really helped me, but I need some advice. I'm loading images from a website where there are thousands of pictures and loading them all at once would be a pain. Instead, I'd want it to behave like the facebook app does - when you scroll to the end of the Gallery, it loads a few more. Or just a simple "more" button for loading a few more images.

Thanks
silkuze
Freshman
Freshman
 
Posts: 2
Joined: Tue Nov 09, 2010 10:04 am

Re: Gallery with remote Images

Postby blundell » Tue Nov 09, 2010 11:59 am

If you implement a GridView for your images (works same for ListView)
http://developer.android.com/reference/ ... dView.html
http://developer.android.com/guide/tuto ... dview.html

In your adapter you feed it a list of items to display, you can therefore set this to a maximum of say 30.

Then when you get to the bottom of your list have a scrollListener and implement this if:
Code: Select all
// Means were at the end of the list
                if(totalItemCount - visibleItemCount - firstVisibleItem <= 0){

                 }



In this code you can set a button to View.VISIBLE allowing you to only show the 'more' button when your at the end of your list
User avatar
blundell
Master Developer
Master Developer
 
Posts: 1610
Joined: Tue Nov 18, 2008 12:58 pm
Location: UK

Re: Gallery with remote Images

Postby silkuze » Tue Nov 09, 2010 2:21 pm

blundell wrote:If you implement a GridView for your images (works same for ListView)
http://developer.android.com/reference/ ... dView.html
http://developer.android.com/guide/tuto ... dview.html

In your adapter you feed it a list of items to display, you can therefore set this to a maximum of say 30.

Then when you get to the bottom of your list have a scrollListener and implement this if:
Code: Select all
// Means were at the end of the list
                if(totalItemCount - visibleItemCount - firstVisibleItem <= 0){

                 }



In this code you can set a button to View.VISIBLE allowing you to only show the 'more' button when your at the end of your list


Thanks :)

I'm also having a big problem with the code OP has posted. I copied it exactly and when I click on item in the Gallery, ImageView just doesn't appear. Is it supposed to be like that?
silkuze
Freshman
Freshman
 
Posts: 2
Joined: Tue Nov 09, 2010 10:04 am

Re: Gallery with remote Images

Postby aptgopal » Tue Nov 16, 2010 8:20 pm

In this example instead of image from website(URL) we add our own image from our remote server
Is it possible or not if it is possible means please explain me with some code
aptgopal
Developer
Developer
 
Posts: 25
Joined: Tue Nov 16, 2010 7:08 pm
Location: India

Re: Gallery with remote Images

Postby aptgopal » Tue Nov 16, 2010 8:33 pm

Hi silkuze

You set the internet permission in manifest file then the application run nicely
Because me also faced the same
aptgopal
Developer
Developer
 
Posts: 25
Joined: Tue Nov 16, 2010 7:08 pm
Location: India

Re: Gallery with remote Images

Postby andrei_catalin7 » Mon Nov 29, 2010 12:47 pm

Hy, can you adapt the code as when i use setOnItemClickListner my image to scale up (grow picture)?
I tried to use this http://stackoverflow.com/questions/1561938/android-animation-in-gallery-view but no results.
Can you help me please?
Thank's, Have a nice day

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.

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


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 ]
Using java Syntax Highlighting
  1. i.setImageResource(this.myImageIds[position]);
Parsed in 0.031 seconds, using GeSHi 1.0.8.4

What we'll do now instead is the following:
Syntax: [ Download ] [ Hide ]
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.035 seconds, using GeSHi 1.0.8.4

Thats it :)

Full source:


"/res/layout/main.xml":
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. <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 ]
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.047 seconds, using GeSHi 1.0.8.4


Regards,
plusminus
andrei_catalin7
Once Poster
Once Poster
 
Posts: 1
Joined: Mon Nov 29, 2010 12:34 pm

Re: Gallery with remote Images

Postby lesmaun » Wed Nov 09, 2011 8:17 pm

Plusminus, using your example was the only way i could put my array of links in a gallery, thank you!

But, the application freezes(on slow connection) and that is a problem. I don't know if this is the correct place to put the topic. How, using your code, can i put everything in a thread and show progressbars while loading?
and to show miniatures, and cashing? O_O
I know , im asking a lot, the thread will be a huge greattt help.
Thank you again.
lesmaun
Once Poster
Once Poster
 
Posts: 1
Joined: Wed Nov 09, 2011 7:32 pm

Top
PreviousNext

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 5 guests