Repetition of image while scrolling in Android grid view using Universal Image Loader

Question

I am trying to load images from the Internet using Universal Image Loader on a gridview using the below code.

public View getView(int position, View converView, ViewGroup parent) {
        Log.v("Description", "Description is " + position);
        ViewHolder mVHolder;
        if (converView == null) {
            LayoutInflater vi = (LayoutInflater) conted.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            converView = vi.inflate(R.layout.customgrid, null);
            mVHolder = new ViewHolder();
            mVHolder.mImageView = (ImageView) converView
                    .findViewById(R.id.imgview);
            mVHolder.mTextView1 = (TextView) converView
                    .findViewById(R.id.textView1);
            mVHolder.mTextView2 = (TextView) converView
                    .findViewById(R.id.textView2);
            mVHolder.mTextView3 = (TextView) converView
                    .findViewById(R.id.textView3);

            converView.setTag(mVHolder);
        } else {
            mVHolder = (ViewHolder) converView.getTag();
        }
        // mVHolder.mImageView.setImageResource(mThumbIds[position]);
        // mVHolder.mImageView.setImageDrawable(LoadImageFromURL(
        // mThumbIds[position]));
        imageLoader.displayImage(mThumbIds[position],mVHolder.mImageView,options, animationListener);
        Log.v("Names",NAMES[position] + STATES[position] + CONSTITUENCY[position]);
        mVHolder.mTextView1.setText(NAMES[position]);
        mVHolder.mTextView2.setText(STATES[position]);
        mVHolder.mTextView3.setText(CONSTITUENCY[position]);
        return converView;
    }

However, when I scroll down in the list, the first image of the first row seems to repeat in most of the grids. It does not stay all the time - it changes back to the original image after a while. My question is, is this a issue with view inflation on gridview or image loading of Universal Image Loader?

Bogle

What is imageLoader here? – Placket

@user3431672, imageloader is Universal Image loader github.com/nostra13/Android-Universal-Image-Loader – Bogle

It looks like it has to do with the adapter. Just to test, try removing the recycle of view and see if the images are properly displayed. It would be slow and the scrolling would ve laggy. But it should give an idea of where we have a problem. We should be good to debug then. – Placket

Answer 1

I think your problem is that you are not setting the resetViewBeforeLoading() method for DisplayImageOptions like this:-

     DisplayImageOptions options = new DisplayImageOptions.Builder()
    .showStubImage(R.drawable.stub_image)
    .showImageForEmptyUri(R.drawable.image_for_empty_url)
 ---->   .resetViewBeforeLoading(true)<----very important for recycling views
    .cacheInMemory()
    .cacheOnDisc()
    .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default
    .bitmapConfig(Bitmap.Config.ARGB_8888) // default
    .delayBeforeLoading(1000)
    .displayer(new SimpleBitmapDisplayer()) // default
    .build();

and then apply this DisplayImageOptions.

        imageLoader.displayImage(mThumbIds[position],mVHolder.mImageView,options,                   animationListener);

Canaan

That is not exactly the case however it is related, I had removed the showStubImage(R.drawable.stub_image) to see the effect and forgot...now added and its not repeating the image thank YOU. – Bogle

Solved it for me too! However the above is deprecated. There are newer versions available at the Git Hub page. – Hendon

Hi I have similar problem. I tried this solution but still the problem isn't solved. – Charge

Use resetViewBeforeLoading is a bad idea for large Images. – Torto

Answer 2

Another solution is to use setTag() for identify view:

class ViewHolder {
    ImageView thumbnail;
    public boolean isSameView(String tag) {
        if (tag == null) {
            return thumbnail.getTag() == null;
        }
        return tag.equals(thumbnail.getTag());
    }
}


protected void imageLoader(ViewHolder holder, String imageUrl) {
    if (!holder.isSameView(imageUrl)) {  // If image is loaded correctly skip else reload and set new image
        holder.thumbnail.setTag(imageUrl);
        imageLoader.displayImage(imageUrl, holder.thumbnail, new SimpleImageLoadingListener() {@
            Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                view.setTag(failReason.getType().name()); // You can handle errors and avoid repeating requests that return error codes
            }
        });
    }
}

Cardiganshire