Bug 36600 - Changing an Image.Source causes a visual flickering due to height changes in layout
Summary: Changing an Image.Source causes a visual flickering due to height changes in ...
Alias: None
Product: Forms
Classification: Xamarin
Component: Android ()
Version: 2.0.0
Hardware: PC Mac OS
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2015-12-04 15:52 UTC by John Miller [MSFT]
Modified: 2016-11-03 16:11 UTC (History)
10 users (show)

Tags: ac
Is this bug a regression?: ---
Last known good build:

Sample Project (138.69 KB, application/zip)
2015-12-04 15:52 UTC, John Miller [MSFT]
JavaSample (181.62 KB, application/zip)
2016-02-16 21:16 UTC, Cody Beyer (MSFT)
Xamarin.Android Project(Does not demonstrate behavior) (93.52 KB, application/x-zip-compressed)
2016-02-16 22:38 UTC, Jon Douglas [MSFT]

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report for Bug 36600 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:

Description John Miller [MSFT] 2015-12-04 15:52:00 UTC
Created attachment 14128 [details]
Sample Project


   On Android, changing an Image.Source at runtime causes an undesired visual "flickering". 

**Steps to Reproduce:**

   1. Run the attached on an Android emulator
   2. Press the Test button repeatedly 

**Actual Results:**


**Expected Results:**

   The "Label Test Test" should not jump to the top and back to the bottom when the image changes. Similar to how the iOS project works (run that on the iOS simulator to see). 

**Build Date & Platform:**

   XF 2.0
Comment 2 John Hardman 2015-12-22 18:01:30 UTC
Note that a similar sounding bug has been raised against Windows and WinPhone 8.1, number 37237. I suspect it has a different cause, but mention it here just in case.
Comment 5 Cody Beyer (MSFT) 2016-02-16 21:16:48 UTC
Created attachment 15067 [details]

Sample using Java demonstrating a lack of flicker
Comment 7 Cody Beyer (MSFT) 2016-02-16 22:23:54 UTC
It appears that setting the height and width for the image explicitly removes the flicker.

This can be done via the HeightRequest and WidthRequest properties, such as:

>image.HeightRequest = 234;
>image.WidthRequest = 234;
Comment 8 Jon Douglas [MSFT] 2016-02-16 22:38:06 UTC
Created attachment 15068 [details]
Xamarin.Android Project(Does not demonstrate behavior)
Comment 10 Dominic N [MSFT] 2016-02-16 23:15:16 UTC
Customer just indicated he has set width and heightrequest but still has issues with flicker.
Comment 11 Jordan Restifo 2016-05-24 20:54:00 UTC
I wanted to chime in and confirm I am also experiencing the issue in Xamarin.Forms It is quite ugly and I have to imagine fairly common, anyone who has a data binding on an ImageSourceProperty must be experiencing it. Is there anything in the works to ameliorate the problem, or any workarounds? (Such as overriding an event in a custom renderer or something)
Comment 12 John Hardman 2016-05-24 22:44:38 UTC
Jordan - as a workaround (although not a nice one), if you know what images can appear at a particular position, rather than use ImageSource to replace one by another, actually overlay multiple images of the same size at the same location, and use IsVisible and/or Opacity to make just one visible at any time.

I use this technique for producing buttons with multiple states (e.g. expander/contractor buttons, checkboxes etc), as well as using this same technique to implement a generic ContentButton and a decent ImageButton.

Be aware though, that this technique currently shows up a couple of other bugs on WinRT and UWP, with a particularly nasty one where this technique is used in a Grid in a ViewCell in a ListView. Also, if combining with a button at the same location, you might need to use an opacity around 0.02 rather than use IsVisible to hide the button.