Loading images from remote server/web

raquibulbari · by **raquibulbari** » Sat Jan 26, 2008 11:49 am

[align=center]Loading images from remote server/web[/align]

Description: In this tutorial i will show you how to load remote images to your application and bind this image to an ImageView object. HttpURLConnection is used to download the image data and BitmapFactory is used to produce the bitmap which will be used as imageview resources.

The java code goes like this:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

import java.io.IOException;
 
import java.io.InputStream;
 
import java.net.HttpURLConnection;
 
import java.net.MalformedURLException;
 
import java.net.URL;
 
import java.util.HashMap;
 
import java.util.Map;
 
import java.util.Random;
 
import android.app.Activity;
 
import android.graphics.Bitmap;
 
import android.graphics.BitmapFactory;
 
import android.os.Bundle;
 
import android.util.Log;
 
import android.view.View;
 
import android.widget.Button;
 
import android.widget.EditText;
 
import android.widget.ImageView;
 
public class HTTPTest extends Activity {
 
        ImageView imView;
 
        String imageUrl="http://11.0.6.23/";
 
        Random r;
 
    /** Called when the activity is first created. */   
 
    @Override
 
    public void onCreate(Bundle icicle) {
 
        super.onCreate(icicle);
 
        setContentView(R.layout.main);
 
        r= new Random();
 
        Button bt3= (Button)findViewById(R.id.get_imagebt);
 
        bt3.setOnClickListener(getImgListener);
 
        imView = (ImageView)findViewById(R.id.imview);
 
    }    
 
    View.OnClickListener getImgListener = new View.OnClickListener()
 
    {
 
                @Override
 
                public void onClick(View view) {
 
                        // TODO Auto-generated method stub
 
                        //i tried to randomize the file download, in my server i put 4 files with name like
 
                        //png0.png, png1.png, png2.png so different file is downloaded in button press
 
                        int i =r.nextInt()%4;
 
                        downloadFile(imageUrl+"png"+i+".png");
 
                        Log.i("im url",imageUrl+"png"+i+".png");
 
                }
 
    };
 
    Bitmap bmImg;
 
    void downloadFile(String fileUrl){
 
                URL myFileUrl =null;            
 
                try {
 
                        myFileUrl= new URL(fileUrl);
 
                } catch (MalformedURLException e) {
 
                        // TODO Auto-generated catch block
 
                        e.printStackTrace();
 
                }
 
                try {
 
                        HttpURLConnection conn= (HttpURLConnection)myFileUrl.openConnection();
 
                        conn.setDoInput(true);
 
                        conn.connect();
 
                        int length = conn.getContentLength();
 
                        InputStream is = conn.getInputStream();
 
                        bmImg = BitmapFactory.decodeStream(is);
 
                        imView.setImageBitmap(bmImg);
 
                } catch (IOException e) {
 
                        // TODO Auto-generated catch block
 
                        e.printStackTrace();
 
                }
 
        }
 
}
 
Parsed in 0.039 seconds,  using GeSHi 1.0.8.4

And here is the layout file (main.xml):

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
    android:orientation="vertical"
 
    android:layout_width="fill_parent"
 
    android:layout_height="fill_parent"
 
    >
 
<TextView  
 
    android:layout_width="fill_parent" 
 
    android:layout_height="wrap_content" 
 
    android:text="Hello World, HTTPImage load test"
 
    />
 
    <Button id="@+id/get_imagebt"
 
    android:layout_width="wrap_content"
 
    android:layout_height="wrap_content"
 
    android:text="Get an image"
 
    android:layout_gravity="center"
 
    />   
 
    <ImageView id="@+id/imview"
 
    android:layout_width="wrap_content"
 
    android:layout_height="wrap_content"
 
    android:layout_gravity="center"
 
    />
 
</LinearLayout>
Parsed in 0.003 seconds,  using GeSHi 1.0.8.4

The code is pretty simple and easy, most of you might already have done this, i am a slow learner, i tried different ways first, i tried to read the whole bytes of image data, do other trial and error method. I was confused about the Bitmap tranformation technology. Then i found that there is a built in class known as BitmapFactory, it can produce bitmap directly from stream. This saved a lot of my efforts. Hope it will come useful to you.

Happy andcoding

--
SHIMUL

plusminus · by **plusminus** » Sat Jan 26, 2008 12:07 pm

Hello shimul,

thanks for sharing your code with the community.
Loading remote images is also a part of the :src: Android Weather Forecast-Tutorial.
The code I used there is almost the same:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

     public void setRemoteImage(URL aURL) {
 
          try {
 
               URLConnection conn = aURL.openConnection();
 
               conn.connect();
 
               InputStream is = conn.getInputStream();
 
               BufferedInputStream bis = new BufferedInputStream(is);
 
               Bitmap bm = BitmapFactory.decodeStream(bis);
 
               bis.close();
 
               is.close();
 
               this.myImageView.setImageBitmap(bm);
 
          } catch (IOException e) {
 
               /* Reset to Default image on any error. */
 
               this.myImageView.setImageDrawable(getResources()
 
                         .getDrawable(R.drawable.default));
 
          }
 
     } 
Parsed in 0.032 seconds,  using GeSHi 1.0.8.4

Btw: I think these two lines are useless in your snippet, right :?:

:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

               int[] bitmapData =new int[length];
 
               byte[] bitmapData2 =new byte[length]; 
Parsed in 0.033 seconds,  using GeSHi 1.0.8.4

Best Regards,
plusminus

raquibulbari · by **raquibulbari** » Sat Jan 26, 2008 1:43 pm

right man those two lines are not required at all

I missed it man, it would be great if i found your tutorial first, so much time waste i did
I am a pathetic looser

Cheefrocker · by **Cheefrocker** » Sat Feb 02, 2008 12:01 pm

Nice Tutorial!!

But how can i combinate your code with an gallery.

I want load many images and thow same in a gallery with an imageswitcher. can somebody help me?

thank you very much for your help!!

plusminus · by **plusminus** » Sat Feb 02, 2008 12:50 pm

Hello Cheefrocker,

Created a tutorial for you and others: :src: Gallery with remote Images.

I hope you like it.

Regards,
plusminus

zeeshan · by **zeeshan** » Mon Mar 17, 2008 8:42 am

i have a bytes of image i want to convert into inputstream to show on listview ?? how can i do that

GodsMoon · by **GodsMoon** » Tue Apr 08, 2008 3:18 am

I can get images from everywhere but Google Charts API http://code.google.com/apis/chart/

This doesn't work.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

ImageView chart = (ImageView) findViewById(R.id.chart);
 
                Bitmap bmImg; 
 
                try {
 
                                URL chartUrl = new URL("http://chart.apis.google.com/chart?cht=lc&amp;chs=200x100&amp;chd=s:fohmnytenefohmnytene&amp;chxt=x,y&amp;chxl=0:|Apr|May|June|1:||50+Kb");
 
                                HttpURLConnection conn= (HttpURLConnection)chartUrl.openConnection();
 
                    conn.setDoInput(true);
 
                    conn.connect();
 
                    int length = conn.getContentLength();
 
                    InputStream is = conn.getInputStream();
 
                    bmImg = BitmapFactory.decodeStream(is); 
 
                chart.setImageBitmap(bmImg);
 
                } catch (IOException e) {
 
                       /* Reset to Default image on any error. */
 
                       //this.myImageView.setImageDrawable(getResources().getDrawable(R.drawable.default));
 
                  }
Parsed in 0.037 seconds,  using GeSHi 1.0.8.4

If I replace the google charts image everything works fine.
I get an "java.lang.IllegalArgumentException: Argument must not be null." from conn.connect();

I'm guessing its something funny with google charts, but I can't image what it is. The image work fine in the browser on Android.

Any ideas?

GodsMoon · by **GodsMoon** » Tue Apr 08, 2008 4:26 am

Alright so I already figured this out.

If anyone is interested, you have to url encode the |
replace: http://chart.apis.google.com/chart?cht= ... ello|World
with: http://chart.apis.google.com/chart?cht= ... lo%7CWorld

and it works!

dkkundudolan · by **dkkundudolan** » Tue Apr 08, 2008 1:33 pm

Hi All,

this prog is alright. but during run, its showing "NullPointerException" . how to solve the probs?
please reply me soon.

thanks
dolan.

plusminus · by **plusminus** » Thu Apr 10, 2008 11:51 pm

dkkundudolan wrote:Hi All,

this prog is alright. but during run, its showing "NullPointerException" . how to solve the probs?
please reply me soon.

thanks
dolan.

where is it thrown :?:

Jesmiatka · by **Jesmiatka** » Tue Apr 15, 2008 12:07 pm

Hmm,

It seems I can't download images from HTTPS websites?
I get the I/O Exception thrown at conn.connect();

I already tried to make the openConnection a HttpsURLConnection but doesn't fix anything..
Opening the URL trough the browser (which I print in the log) works just fine!
Anyone knows how to download images from https?

Mike

snowtiger · by **snowtiger** » Wed Apr 23, 2008 10:40 am

Has anybody already tried to use GData webservices? Espacially PicasawebClient/Service?

I can't figure out, how to use this Picasa API. In a normal Java App it works fine, copy&paste the same code to an android project leads to a lot of errors. Its just the following code:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

URL albumsUrl = new URL("http://picasaweb.google.com/data/feed/api/user/<usernameHere>?kind=album");
 
                PicasawebService myService = new PicasawebService("exampleCo-exampleApp-1");
 
                // Send the request for the user's albums.
 
                UserFeed myUserFeed = myService.getFeed(albumsUrl, UserFeed.class);
 
                // Print the title of the returned feed:
 
                System.out.println(myUserFeed.getTitle().getPlainText());
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

I already translated all the jars with retrotranslator for android, because google APIs won't work with google Android... WTF! But I still get an ExceptionInInitializerError.

tdi · by **tdi** » Mon Dec 29, 2008 12:57 am

dkkundudolan wrote:Hi All,

this prog is alright. but during run, its showing "NullPointerException" . how to solve the probs?
please reply me soon.

thanks
dolan.

Im getting the same exception....
12-29 00:54:56.539: ERROR/AndroidRuntime(197): Uncaught handler: thread main exiting due to uncaught exception
12-29 00:54:56.569: ERROR/AndroidRuntime(197): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.proadmin.stacjebenzynowe/com.proadmin.stacjebenzynowe.Stacjebenzynowe}: java.lang.NullPointerException
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2140)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2156)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.ActivityThread.access$1800(ActivityThread.java:112)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1580)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.os.Handler.dispatchMessage(Handler.java:88)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.os.Looper.loop(Looper.java:123)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.ActivityThread.main(ActivityThread.java:3742)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at java.lang.reflect.Method.invokeNative(Native Method)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at java.lang.reflect.Method.invoke(Method.java:515)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:739)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:497)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at dalvik.system.NativeStart.main(Native Method)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): Caused by: java.lang.NullPointerException
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at com.proadmin.stacjebenzynowe.Stacjebenzynowe.onCreate(Stacjebenzynowe.java:29)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1122)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2103)
12-29 00:54:56.569: ERROR/AndroidRuntime(197): ... 11 more

the code is as follows ( XML is the same ):

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package com.proadmin.stacjebenzynowe;
 
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
 
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
 
public class Stacjebenzynowe extends Activity {
    /** Called when the activity is first created. */
        
        ImageView imView; 
        String imageUrl = "http://seth.coloco.pl/~tdi/";
        
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        Button bt = (Button) findViewById(R.id.get_imagebt);
        bt.setOnClickListener( new View.OnClickListener() {     
                public void onClick(View view) {
                        downloadFile(imageUrl+"stacje.jpg");
                }
        });
        imView = (ImageView) findViewById(R.id.imview);
        Log.i("im url",imageUrl+"png.png"); 
    } 
    private Bitmap bmImg; 
    void downloadFile(String fileUrl) {
        //URL myFileUrl = null;
//      try {
//              myFileUrl = new URL     (fileUrl);
//      } catch (MalformedURLException e) {
//              Log.d("stacje",e.toString());
//      }
//      try {
//              HttpURLConnection conn = (HttpURLConnection) myFileUrl.openConnection();
//              
//              conn.connect();
//              
//              InputStream is = conn.getInputStream();
//              bmImg = BitmapFactory.decodeStream(is);
//              is.close();
//              
//              this.imView.setImageBitmap(bmImg);
//      this.imView.setScaleType(ImageView.ScaleType.FIT_CENTER); 
//      } catch (IOException e ){
//              Log.d("stacje",e.toString());
//      }
    }
    
    
}
 
Parsed in 0.043 seconds,  using GeSHi 1.0.8.4

tdi · by **tdi** » Mon Dec 29, 2008 8:50 am

ok i found what the problem was. In XML file, instead of having <Button id="...., i had to have <Button android:id="....

Image does not get downloaded because of SocketException but that i will try to handle

edit:
I added :

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

 
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
Parsed in 0.000 seconds,  using GeSHi 1.0.8.4

and works.

Thanks for great tutorials.

androidrocks · by **androidrocks** » Thu Apr 02, 2009 4:01 pm

string url1 = "my url";
URL url = new URL(url1);
URLConnection conn = url.openConnection();
conn.connect();
InputStream is = conn.getInputStream();
BufferedInputStream bis = new BufferedInputStream(is);
BitmapFactory.Options bf = new BitmapFactory.Options();
bm = BitmapFactory.decodeStream(bis);
imgView.setImageBitmap(bm);

I am using this code to get the image from web and set it on imageview . But the issue is the width that i get is the same as original image. I want to increase the width of the image so that it automatically fits as per the screen size. Any idea on how to increase the width of the bitmap image.

When I use drawable it automatically fits the same image as the screen size. I use drawable.setBackground(drawableimage);

But this is not the case with bitmap image. Any idea on how to increase the width of the bitmap image.

Loading images from remote server/web

Loading images from remote server/web

Bytes into inputstream

problem with images from Google Charts

Who is online