Question

I have an imageview which is loading an image from the internet. I am loading the image from the web and converting it into a bitmap image using an async task. I’d like to display a static image in my imageview and have a progress spinner on top of the imageview while the image is loading. The problem is i have the progress spinner within my xml and I can’t use it within my async task and I do not know how to make the progress spinner visible within the imageview as well. How do I go about doing this ? Here is my async task class :

public class LoadImage extends AsyncTask<Void, Void, Bitmap>{

    Context callingContext = null;

    ImageView view;
    String b = null;
    ListView lv;
    ProgressDialog p;

    public LoadImage(Context c, ImageView view, String b){

        this.view = view;
        this.b = b;
        this.callingContext = c;
    }


    @Override
    protected void onPreExecute() {
        // TODO Auto-generated method stub
        super.onPreExecute();
    //  p = (ProgressDialog) findViewById(R.id.progressBar1);
        p = ProgressDialog.show(callingContext, "Loading Events", "Retrieving data from server, please wait...", true);
    }



    public Bitmap getBit(String data){

        Bitmap bitmap;
        BitmapFactory.Options bmOptions;
        bmOptions = new BitmapFactory.Options();
        bmOptions.inJustDecodeBounds = true;
        //from web
        try {
            bitmap=null;
            InputStream is=new URL(data).openStream();
            BitmapFactory.decodeStream(is, null, bmOptions);
            is.close();
            BitmapFactory.Options o2 = new BitmapFactory.Options();
            o2.inSampleSize = 20;
            is = new URL(data).openStream();
            bitmap = BitmapFactory.decodeStream(is, null, o2);
            is.close();
            return bitmap;
        } catch (Exception ex){
           ex.printStackTrace();
           return null;
        }

    }


    @Override
    protected Bitmap doInBackground(String... arg0) {
        // TODO Auto-generated method stub  
        Bitmap b = null;    
        URL imageUrl = null;

        b = getBit(this.b);

            return b;  
    }



    @Override
    protected void onPostExecute(Bitmap result) {
        // TODO Auto-generated method stub
        super.onPostExecute(result);
        if(result == null)
            view.setImageResource(R.drawable.ic_launcher);

        p.dismiss();

    }   
} 

Answer 1

You can wrap an ImageView and a ProgessBar into a Relative layout. So, when the image is loading, set progressbar’s visibility to VISIBLE, and ImageView’s one to GONE. At the moment you have your Bitmap ready, invert the Visibilities.

public class LoaderImageView extends RelativeLayout {
    private Context     context;
    private ProgressBar progressBar;
    private ImageView   imageView;

    public LoaderImageView(final Context context, final AttributeSet attrSet) {
    super(context, attrSet);
    instantiate(context, attrSet);
    }

   private void instantiate(final Context _context, AttributeSet attrSet) {
       context = _context;
       imageView = new ImageView(context, attrSet);
       progressBar = new ProgressBar(context, attrSet);
       progressBar.setIndeterminate(true);

       addView(progressBar);
       addView(imageView);

       this.setGravity(Gravity.CENTER);
   }

   // ...

   // Then, play with this method to show or hide your progressBar
   public LoaderImageView(final Context context, final AttributeSet attrSet) {
    super(context, attrSet);
    instantiate(context, attrSet);
   }

}