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?

Do you have `TextView`'s in items, showing ellipsized/truncated text ? — S.D., Nov 27 '12 at 11:03
Did you call `notifyDataSetChanged()` in quick succession, like each time you add one image ? — S.D., Nov 27 '12 at 11:48
no i added all the 5 images in the array and called notifydatasetchanged() — Vignesh, Nov 27 '12 at 12:27
Sure, `GridView` must redraw itself and minimal flicker is normal, unless there's something that makes it slow for `GridView` to load images. Does you adapter do something heavy in `getView()` ? — S.D., Nov 27 '12 at 12:30
ya i'm telling about the minimal flickering. Is it possible to avoid that? — Vignesh, Nov 28 '12 at 04:40
Found anything with this? I'm facing the same issue here with Galaxy S3. — Niko, May 06 '13 at 12:25
can you show us the code on the `getView()`? maybe you are not recycling the view or something like that. — 4gus71n, Sep 22 '13 at 04:36

score 7 · Answer 1 · answered Jul 17 '14 at 12:10

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;
}

Glide doesn't allow you to set a tag to the image. – Hamzeh Soboh Dec 31 '15 at 13:44 — Hamzeh Soboh, Dec 31 '15 at 13:44

Ken · Answer 2 · 2015-09-29T22:31:50.630

6

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.

edited Sep 29 '15 at 22:31

answered Aug 17 '14 at 03:03

Ken

30,811
34
116
155

Can you please explain how this will minimize the flickering? – Code-Apprentice Aug 17 '14 at 23:36
@Code-Apprentice Grep the android.GridView source code here: http://goo.gl/Nq4kpQ, 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`. – Ken Aug 17 '14 at 23:43
Please add that explanation to your answer. – Code-Apprentice Aug 17 '14 at 23:48

score 1 · Answer 3 · answered Aug 18 '14 at 13:04

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.

score 1 · Answer 4 · answered Sep 19 '14 at 10:15

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.

Thanks, it helped (combined with `hasStableIds` = true). – CoolMind Aug 08 '16 at 09:17 — CoolMind, Aug 08 '16 at 09:17

score 0 · Answer 5 · answered Oct 04 '13 at 05:37

0

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

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

answered Oct 04 '13 at 05:37

bhans

51
4

score 0 · Answer 6 · edited Apr 13 '17 at 12:40

0

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

With this approach you can avoid flickering.

edited Apr 13 '17 at 12:40

Community

1
1

answered Jul 02 '15 at 07:26

ceph3us

7,326
3
36
43

score 0 · Answer 7 · edited Aug 14 '15 at 07:09

0

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);

edited Aug 14 '15 at 07:09

Jaiprakash Soni

4,100
5
36
67

answered Aug 14 '15 at 06:52

Dayanand Waghmare

2,979
1
22
27

Amol Desai · Answer 8 · 2015-09-24T07:21:10.030

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 `

score 0 · Answer 9 · answered Sep 29 '15 at 22:51

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.

How to avoid flickering while updating gridview?

9 Answers9

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

Linked