How to avoid flickering while updating gridview?

Question

I have a gridview. Im displaying images from the array of 10 images. After 1 minute i\'m adding 5 more images. To update the gridview i\'m using the following code.

<

Answer 1

I had the same issue and was able to solve it like this:

In fact it was due to my ListAdapter which didn't managed properly the case when the whole list is refreshed. If so, what you want to do is keeping the items already displayed on the screen as-is.

To do so, in the method getView of the Adapter when you get a recycled item, you must check if it's not already the one you want to display. If it's the case, just return it directly.

@Override
public View getView(int position, View convertView, ViewGroup container) {
    ImageView imageView;
    String src = this.getItem(position).getSrcThumbnail();
    if (convertView == null) {
        imageView = new ImageView(getContext());
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

        int height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120, getResources().getDisplayMetrics());

        imageView.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, height));

    } else {
        imageView = (ImageView) convertView;

        // When you get a recycled item, check if it's not already the one you want to display.
        String newSrc = (String) imageView.getTag();

        if(newSrc.equals(src)){
            // If so, return it directly.
            return imageView;
        }
    }

    loadBitmap(this.getItem(position).getSrcThumbnail(), imageView);

    // Here you set the unique tag that allow to identify this item.
    imageView.setTag(src);

    return imageView;
}

Answer 2

If your adapter has stable ids, override hasStableIds to return true.

Grep the android.GridView source code here, it allows the grid view to reuse a view for the same data rather than do a full redraw. This might help in the OP's case, because by default hasStableIds returns false.

Answer 3

Use nostra13's Universal Image Loader on showing your images, set some animations while showing it.

...DisplayImageOptions.displayer(FadeInBitmapDisplayer)...

Answer 4

here i wrote a detailed example how to use viewholder pattern:

With this approach you can avoid flickering.

Answer 5

The solution is to not reload your image when it did not change.

In your adapters getView() do:

// schedule rendering:
final String path = ... (get path here);
if (holder.lastImageUrl == null || !holder.lastImageUrl.equals(path)
                || holder.headerImageView.getDrawable() == null) {
    // refresh image
    imageLoader.displayImage(imageUri, imageAware);
} else {
    // do nothing, image did not change and does not need to be updated
}

on success (add a ImageLoadingListener) you set holder.lastImageUrl = path, on fail and cancel you set holder.lastImageUrl to null so that it will reload next time.

Answer 6

Flickering occurs because the updating the UI is heavy.Please check weather you are doing cpu intensive functions like image cropping in the getview() of the adapter.The idea is to keep the getview() function simple and do the process intensive logic in separate threads.