Search code examples
androidfresco

Avoid flicker when switching from low res image to GIF using Fresco


I'm loading GIFs into SimpleDraweeViews in a RecyclerView using Fresco.

I'd like to load a static thumbnail first while the GIF is downloading and then the GIF as soon as it's available.

It's working, but there's a white flicker when the thumbnail is swapped for the GIF. Is there any way of avoiding it?

Setting the fadeDuration to 0 doesn't help. I can skip the thumbnail when the GIF is cached, but I'd ideally like to avoid the flicker in all cases.

The view is quite simple:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/gif_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

and the code seems straightforward too:

DraweeController controller = Fresco.newDraweeControllerBuilder()
            .setLowResImageRequest(ImageRequest.fromUri(thumbnailUrl))
            .setUri(contentUrl)
            .setAutoPlayAnimations(true)
            .setOldController(draweeView.getController()).build();

draweeView.setController(controller);

There's a video here: https://www.dropbox.com/s/vkyqltm1hrrnvaz/gifFlicker.m4v?dl=0

It uses this GIF: http://www.furrytalk.com/wp-content/uploads/2015/01/kitten.gif

Thanks!


Solution

  • You can use the RetainingDataSourceSubscriber as explained here: https://github.com/facebook/fresco/pull/1328