Android : Loading an image from the Web with Asynctask

Question

How do I replace the following lines of code with an Asynctask ? How do you "get back" the Bitmap from the Asynctask ? Thank you.

ImageView mChart = (ImageView) findViewById(R.id.Chart);
String URL = "http://www...anything ...";

mChart.setImageBitmap(download_Image(URL));

public static Bitmap download_Image(String url) {

        //---------------------------------------------------
        Bitmap bm = null;
        try {
            URL aURL = new URL(url);
            URLConnection conn = aURL.openConnection();
            conn.connect();
            InputStream is = conn.getInputStream();
            BufferedInputStream bis = new BufferedInputStream(is);
            bm = BitmapFactory.decodeStream(bis);
            bis.close();
            is.close();
        } catch (IOException e) {
            Log.e("Hub","Error getting the image from server : " + e.getMessage().toString());
        } 
        return bm;
        //---------------------------------------------------

    }

I thought about something like this :

replace :

mChart.setImageBitmap(download_Image(graph_URL));

by something like :

mChart.setImageBitmap(new DownloadImagesTask().execute(graph_URL));

and

public class DownloadImagesTask extends AsyncTask<String, Void, Bitmap> {

@Override
protected Bitmap doInBackground(String... urls) {
    return download_Image(urls[0]);
}

@Override
protected void onPostExecute(Bitmap result) {
    mChart.setImageBitmap(result);              // how do I pass a reference to mChart here ?
}


private Bitmap download_Image(String url) {
    //---------------------------------------------------
    Bitmap bm = null;
    try {
        URL aURL = new URL(url);
        URLConnection conn = aURL.openConnection();
        conn.connect();
        InputStream is = conn.getInputStream();
        BufferedInputStream bis = new BufferedInputStream(is);
        bm = BitmapFactory.decodeStream(bis);
        bis.close();
        is.close();
    } catch (IOException e) {
        Log.e("Hub","Error getting the image from server : " + e.getMessage().toString());
    } 
    return bm;
    //---------------------------------------------------
}


}

but How do I pass a reference to mChart in onPostExecute(Bitmap result) ??? Do I need to pass it with the URL in some way ? I would like to replace all my lines of code :

mChart1.setImageBitmap(download_Image(URL_1));
mChart2.setImageBitmap(download_Image(URL_2));

with something similar ... but in Asynctask way !

mChart1.setImageBitmap(new DownloadImagesTask().execute(graph_URL_1));
mChart2.setImageBitmap(new DownloadImagesTask().execute(graph_URL_2));

Is there an easy solution for this ? Do I get something wrong here ?

Weft

pretty basic question but would be usefull to many beginers like me I think ... please post some code if you have. – Weft

Related: the ImageDownloader example – Crane

@Weft can u pls mention private Bitmap download_Image(String url) { ... } this code ? – Rheostat

If you are using Glide and Kotlin, then this can help you. – Shrill

Answer 1

If there is no good reason to download the image yourself then I would recommend to use Picasso.

Picasso saves you all the problems with downloading, setting and caching images. The whole code needed for a simple example is:

Picasso.with(context).load(url).into(imageView);

If you really want to do everything yourself use my older answer below.

---

If the image is not that big you can just use an anonymous class for the async task. This would like this:

ImageView mChart = (ImageView) findViewById(R.id.imageview);
String URL = "http://www...anything ...";

mChart.setTag(URL);
new DownloadImageTask.execute(mChart);

The Task class:

public class DownloadImagesTask extends AsyncTask<ImageView, Void, Bitmap> {

ImageView imageView = null;

@Override
protected Bitmap doInBackground(ImageView... imageViews) {
    this.imageView = imageViews[0];
    return download_Image((String)imageView.getTag());
}

@Override
protected void onPostExecute(Bitmap result) {
    imageView.setImageBitmap(result);
}


private Bitmap download_Image(String url) {
   ...
}

Hiding the URL in the tag is a bit tricky but it looks nicer in the calling class if you have a lot of imageviews that you want to fill this way. It also helps if you are using the ImageView inside a ListView and you want to know if the ImageView was recycled during the download of the image.

I wrote if you Image is not that big because this will result in the task having a implicit pointer to the underlying activity causing the garbage collector to hold the whole activity in memory until the task is finished. If the user moves to another screen of your app while the bitmap is downloading the memory can't be freed and it may make your app and the whole system slower.

Larisalarissa

my images are something like 45.2 Ko (46,384 octets) gif type, if that makes any difference ? – Weft

it only is a problem if it takes longer then I guess 20 seconds to download the images and your activity is heavy on system memory. – Larisalarissa

Thank you Janusz, I did an EDIT of my question with some added stuff. What do you think ? I would like to use this AsyncTask on different ImageViews in fact. How to I pass the correct reference to the ImageView within onPostExecute ? Many thanks for your help. – Weft

You can't do it this way: mChart1.setImageBitmap(new DownloadImagesTask().execute(graph_URL_1)); because the async task can not return something. Returning would mean to block the execution until the task is ready but you don't want to do that. – Larisalarissa

Have a look at my answer know. The use of the tag will make the calling class a little bit cleaner looking – Larisalarissa

Thanks a lot, this works nicely. This was my very first experiment with AsyncTask (have been doing Android stuff for a year now, can you believe this !), and it looks indeed better/more flexible than using Threads. – Weft

@SwapAndroid The first code section in the answer shows how you start the task. You need the image view and the URL address, you assign the URL to be the imageView tag and pass the imageView as the task parameter. – Dryly

Answer 2

Try this code:

ImageView myFirstImage = (ImageView) findViewById(R.id.myFirstImage);
ImageView mySecondImage = (ImageView) findViewById(R.id.mySecondImage);
ImageView myThirdImage = (ImageView) findViewById(R.id.myThirdImage);

String URL1 = "http://www.google.com/logos/2013/estonia_independence_day_2013-1057005.3-hp.jpg";
String URL2 = "http://www.google.com/logos/2013/park_su-geuns_birthday-1055005-hp.jpg";
String URL3 = "http://www.google.com/logos/2013/anne_cath_vestlys_93rd_birthday-1035005-hp.jpg";


myFirstImage.setTag(URL1);
mySecondImage.setTag(URL2);
myThirdImage.setTag(URL3);


new DownloadImageTask.execute(myFirstImage);
new DownloadImageTask.execute(mySecondImage);
new DownloadImageTask.execute(myThirdImage);



public class DownloadImagesTask extends AsyncTask<ImageView, Void, Bitmap> {

    ImageView imageView = null;

    @Override
    protected Bitmap doInBackground(ImageView... imageViews) {
        this.imageView = imageViews[0];
        return download_Image((String)imageView.getTag());
    }

    @Override
    protected void onPostExecute(Bitmap result) {
        imageView.setImageBitmap(result);
    }

    private Bitmap download_Image(String url) {

        Bitmap bmp =null;
        try{
            URL ulrn = new URL(url);
            HttpURLConnection con = (HttpURLConnection)ulrn.openConnection();
            InputStream is = con.getInputStream();
            bmp = BitmapFactory.decodeStream(is);
            if (null != bmp)
                return bmp;

            }catch(Exception e){}
        return bmp;
    }
}

Fluorescein

return download_Image((String)imageView.getTag()); gives error. getTag must be called from the UI thread – Taken

I get an empty result in the bitmap, even though if I hit the URL in the browser I get receive the image. Can you tell why that might be happening ? – Astromancy

Usage must be like this :new DownloadImageTask().execute(myFirstImage); new DownloadImageTask().execute(mySecondImage); new DownloadImageTask().execute(myThirdImage); – Origin

Answer 3

you can create a class say..BkgProcess which contains an inner class that extends AsyncTask. while instantiating BkgProcess pass the context of your Activity class in BkgProcess constructor. for eg:

public class BkgProcess {

 String path;   
 Context _context;

public Download(Downloader downloader, String path2){

 this.path = path2;
    _context = downloader;

}

public void callProgressDialog(){

new BkgProcess().execute((Void)null);
}
class Downloads extends AsyncTask<Void, Void, Boolean> {
    private ProgressDialog dialog = new ProgressDialog(_context);
    protected void onPreExecute(){
        dialog.setMessage("Downloading image..");
        dialog.show();
    }

    protected void onPostExecute(Boolean success) {
        dialog.dismiss();
        if(success)
            Toast.makeText(_context, "Download complete", Toast.LENGTH_SHORT).show();
    }

@Override
protected Boolean doInBackground(Void... params) {
    return(startDownload(path));

    }


public boolean startDownload(String img_url) {

// download img..

      return true;
}
}
}

from your activity class..

BkgProcess dwn = new BkgProcess (Your_Activity_class.this, img_path);

dwn.callProgressDialog();

Hatfield

Answer 4

This will get you images of any size... if you dont want the progress dialog just comment the codes in onPreExecute();

for(int i = 0 ; i < no_of_files ; i++ )
 new FetchFilesTask().execute(image_url[i]);


private class FetchFilesTask extends AsyncTask<String, Void, Bitmap> {

    private ProgressDialog dialog = new ProgressDialog(FileExplorer.this);
    Bitmap bitmap[];
    protected void onPreExecute(){
        dialog.setMessage("fetching image from the server");
        dialog.show();
    }

     protected Bitmap doInBackground(String... args) {

             bitmap = getBitmapImageFromServer();
         return bitmap;
     }

     protected void onPostExecute(Bitmap m_bitmap) {
         dialog.dismiss();
         if(m_bitmap != null)
             //store the images in an array or do something else with all the images.   
     }
 }

public Bitmap getBitmapImageFromServer(){

    // fetch image form the url using the URL and URLConnection class
}

Hatfield

Thank you Umesh for your proposition. Maybe indeed I should also add a ProgressDialog, just in case! But how would you pass the context (your FileExplorer.this) to the AsyncTask then ??? I would like that my DownloadImagesTask() could be accessed from any activity of my application ... I created a separate class for it. – Weft