Progressbar in each gridview item Android

Question

I have a gridview showing images and progress bar. Each item contains progress bar and it shows progress when corresponding file downloads. While scrolling gridview, progress bar repeatedly shows progress in wrong items and i am using a viewholder. Please give me a solution...

Answer 1

The problem is that your ProgressBar objects are getting reused arbitrarily by the system when they scroll offscreen.

This means that when one ProgressBar scrolls offscreen, it is reused in a new grid position as that item appears.

The solution is fairly easy. In getView() you must set the progress value and the visibility (if you are hiding them when not in use) of each ProgressBar irregardless of the state of the download. In order to do this, you will have the progress value and download state for each grid position saved, which you probably already have available.

Answer 2

public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    if(convertView==null)
     vi = inflater.inflate(R.layout.rowimage, null);

    ImageView image=(ImageView)vi.findViewById(R.id.ivv); 
    ProgressBar pb= (ProgressBar)vi.findViewById(R.id.pb); 
    display(image, data.get(position).toString(), pb);
    //imageLoader.displayImage(data.get(position).toString(), image,options);

    return vi;
}

  public void display(ImageView img, String url, final ProgressBar spinner)
   {
    imageLoader.displayImage(url, img, options, new ImageLoadingListener() {
        @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);
        }
        @Override
        public void onLoadingCancelled(String imageUri, View view) {

        }

});
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:orientation="vertical" >

<ImageView
    android:id="@+id/ivv"
    android:layout_gravity="center"
    android:layout_width="300dp"
    android:layout_height="300dp"

    />
<ProgressBar 
    android:id="@+id/pb"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

 </RelativeLayout>

In your adapter constructor

 File cacheDir = StorageUtils.getOwnCacheDirectory(a, "UniversalImageLoader/Cache");


 // Get singletone instance of ImageLoader
   imageLoader = ImageLoader.getInstance();
 // Create configuration for ImageLoader (all options are optional)
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(a)
              // You can pass your own memory cache implementation
             .discCacheExtraOptions(1024, 1024, CompressFormat.PNG, 100)
             .discCache(new UnlimitedDiscCache(cacheDir)) // You can pass your own disc cache implementation
             .discCacheFileNameGenerator(new HashCodeFileNameGenerator())
             .enableLogging()
             .build();
 // Initialize ImageLoader with created configuration. Do it once.
 imageLoader.init(config);
    //imageLoader.init(ImageLoaderConfiguration.createDefault(a));
   // imageLoader=new ImageLoader(activity.getApplicationContext());
    options = new DisplayImageOptions.Builder()
    .showStubImage(R.drawable.ic_launcher)
    .cacheInMemory()
    .cacheOnDisc()
    .displayer(new RoundedBitmapDisplayer(20))
    .build();

I have used the above with Universal Image Loader. A stub Image is displayed along with progress dialog at the center. Once Image is downloaded. Image is set to imageview and progress dialog disappears.

https://github.com/nostra13/Android-Universal-Image-Loader

What's LazyList?.

You can see the resulting snap shot. I have used the above for listview. It should be the same for gridview as well. For testing purpose i have used a default launcher image. But can remove the stud image, customize your progress dialog.