Show indeterminate ProgressBar while loading image with Universal Image Loader

Question

I was wondering if there is a mechanism to show a spinning "indeterminate" ProgressBar in place of the image while it's loading with Universal Image Loader.

Right now I'm using the showStubImage() option in DisplayImageOptions to show an image that says "No Image" while the image is being downloaded, but it would be really slick looking if there was a spinning indeterminate ProgressBar on top of the ImageView while the image was downloading.

Answer 1

For reference

final View imageLayout = inflater.inflate(R.layout.item_pager_image, null);
final ImageView imageView = ...
final ProgressBar spinner = ...

imageLoader.displayImage(images[position], imageView, options, new SimpleImageLoadingListener() {
    @Override
    public void onLoadingStarted(String imageUri, View view) {
        spinner.setVisibility(View.VISIBLE);
    }

    @Override
    public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
        spinner.setVisibility(View.GONE);
    }

    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        spinner.setVisibility(View.GONE);
    }
});

Answer 2

I am Posting the grid Adapter class code which I used for downloading images from the web. You have to declare a grid layout with one imageview and two textviews. Pass the string arrays to the adapter.

@Override
public View getView(final int position, View convertView, ViewGroup parent)
{
    // TODO Auto-generated method stub
    LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(activity.LAYOUT_INFLATER_SERVICE);
    //LayoutInflater inflator = activity.getLayoutInflater();
    if(convertView==null)
    {
        view = new ViewHolder();
        convertView = inflater.inflate(R.layout.grid_layout, null);
        view.txtViewTitle = (TextView) convertView.findViewById(R.id.title);
        view.txtViewSubTitle = (TextView) convertView.findViewById(R.id.subTitle);
        view.imgViewFlag = (ImageView) convertView.findViewById(R.id.imageView1);
        convertView.setTag(view);
    }
    else
    {
        view = (ViewHolder) convertView.getTag();
    }

    view.txtViewTitle.setText(listTitle.get(position));
    view.txtViewSubTitle.setText(listSubTitle.get(position));

    //For Picasso
 /*   Picasso.with(parent.getContext())
            .load("http://www.radioarpan.com/upload_images/138630281911.jpg")
            .placeholder(R.mipmap.paceholder)
            .error(R.mipmap.error_page_logo)
            .noFade().resize(125,165)
            .centerCrop()
            .into(view.imgViewFlag);*/



    ImageLoader imageLoader = ImageLoader.getInstance();
    DisplayImageOptions.Builder options = new DisplayImageOptions.Builder().cacheInMemory(true)
            .cacheOnDisc(true).resetViewBeforeLoading(true)
            .showImageForEmptyUri(R.mipmap.paceholder)
            .showImageOnFail(R.mipmap.error_page_logo);


    final ProgressBar spinner =  new ProgressBar(activity, null, android.R.attr.progressBarStyleSmall);
//download and display image from url
      imageLoader.displayImage("http://www.radioarpan.com/upload_images/138630281911.jpg", view.imgViewFlag,new SimpleImageLoadingListener()
   {
       @Override
       public void onLoadingStarted(String imageUri, View view)
       {
           spinner.setVisibility(View.VISIBLE);
       }

       @Override
       public void onLoadingFailed(String imageUri, View view, FailReason failReason)
       {
           spinner.setVisibility(View.GONE);
       }

       @Override
       public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage)
       {
           spinner.setVisibility(View.GONE);
       }
   });