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.

aImgAdapterL.notifyDataSetChanged();  

aImgAdapterL is my ImgaeAdapter. The new images are getting displayed.
My problem is when updating the gridview one flickering or blinking happening during the image updation. Is it possible to hide that flickering?

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

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.

Answer 4

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 5

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

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

Answer 6

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

With this approach you can avoid flickering.

Answer 7

Pass ImageViewAware (instead of ImageView) which doesn't consider actual view size: Intead of:

imageLoader.displayImage(imageUri, imageView);

do following:

ImageAware imageAware = new ImageViewAware(imageView, false)
imageLoader.displayImage(imageUri, imageAware);

Answer 8

Simple solution is 1) Have a method in your adapter that will append/reset your new data list into old array list and not to call notifyDataSetChanged() When user will scroll getview will get called and hence list will be updated. It should not flicker.

e.g. // Have a method in adapter class public void updateList(ArrayList<ABC> list) { /enter code here`/add to old one oldList.addAll(list); }

thats it `

Answer 9

You should enable OpenGL and hardware acceleration:

<application android:hardwareAccelerated="true" ...>

<uses-feature
  android:name="string"
  android:required=["true" | "false"]
  android:glEsVersion="integer" />

You can also using hardware caching on items of your gridview:

view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Finally, you can overlay your grid view during update and play with transparency.