android : progress indicator for image loading

Question

I am using the below algorithm for downloading and caching images. It is working good. Initial loading of an image takes time as expected. I want show a progress indication to show this. I want the progress indicator to come only in the image view not blocking other parts of the screen. For eg i have a list with each ro whaving an image and text. The rows are clickable. So i want to show a progress indication for the image of each row till it is loaded. At the same time the text part should be visible and the list view should be clickable. User need not wait to finish loading . He should be able to click a row and open details page even before the image for that row is loaded .

by progress indicator, i mean just an indication that image is loading. like some spinning wheel. i am not looking for a percentage indication or something like that.

code

    package com.idg.reelbillboard.utils;

import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.util.HashMap;
import java.util.Map;

import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

import android.app.ProgressDialog;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.widget.ImageView;

public class DrawableManager {
    private final Map<String, Drawable> drawableMap;

    public DrawableManager() {
        drawableMap = new HashMap<String, Drawable>();
    }

    public Drawable fetchDrawable(String urlString) {
        if (drawableMap.containsKey(urlString)) {
            return drawableMap.get(urlString);
        }

        Log.d(this.getClass().getSimpleName(), "image url:" + urlString);
        try {
            InputStream is = fetch(urlString);
            Drawable drawable = Drawable.createFromStream(is, "src");


            if (drawable != null) {
                drawableMap.put(urlString, drawable);
                Log.d(this.getClass().getSimpleName(), "got a thumbnail drawable: " + drawable.getBounds() + ", "
                        + drawable.getIntrinsicHeight() + "," + drawable.getIntrinsicWidth() + ", "
                        + drawable.getMinimumHeight() + "," + drawable.getMinimumWidth());
            } else {
              Log.w(this.getClass().getSimpleName(), "could not get thumbnail");
            }

            return drawable;
        } catch (MalformedURLException e) {
            Log.e(this.getClass().getSimpleName(), "fetchDrawable failed", e);
            return null;
        } catch (IOException e) {
            Log.e(this.getClass().getSimpleName(), "fetchDrawable failed", e);
            return null;
        }
    }

    public void fetchDrawableOnThread(final String urlString, final ImageView imageView, Context context) {
        if (drawableMap.containsKey(urlString)) {
            imageView.setImageDrawable(drawableMap.get(urlString));
        }
      //  final ProgressDialog progressDialog = ProgressDialog.show(context, "", "Loading", false); 
        final Handler handler = new Handler() {
            @Override
            public void handleMessage(Message message) {
            //   if(progressDialog.isShowing()) 
            //         progressDialog.dismiss(); 
                imageView.setImageDrawable((Drawable) message.obj);
            }
        };

        Thread thread = new Thread() {
            @Override
            public void run() {
                //TODO : set imageView to a "pending" image

                Drawable drawable = fetchDrawable(urlString);
                Message message = handler.obtainMessage(1, drawable);
                handler.sendMessage(message);

            }
        };
        thread.start();
    }

    private InputStream fetch(String urlString) throws MalformedURLException, IOException {
        DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpGet request = new HttpGet(urlString);
        HttpResponse response = httpClient.execute(request);
        return response.getEntity().getContent();
    }

}

Answer 1

With your current implementation a progress bar will not be working well, as the whole 'load image data and build a drawable' is done in a single line Drawable drawable = Drawable.createFromStream(is, "src");. So there is no way for you to determine how many percents of the loading are done.

What you can do, is to use an indeterminate progress indicator (aka the spinning wheel).

You could e.g. overlay an instance of such a ProgressBar view over the image while it is loading and remove (or hide) it as soon as the image loading is done.