Gradient has very obvious colour banding

While I very much appreciate the SfGradientView control, there is some very obvious colour banding present that is only amplified when the Android pull-down overlay is used (less colours to work with > more banding). The left side of the attached image is the design mockup that I did in Adobe XD before constructing the pages in Xamarin Forms. The right is the actual layout, where the difference is quite substantial, especially around the top half, where a purple to blue divide can be seen quite clearly.

I am using the Android emulator, could it be because of the emulator itself throttling graphics performance?


I notice that in the design preview panel, much less banding is seen. Here is the emulator vs design view comparison:


Is there something I can do to fix this?

5 Replies 1 reply marked as answer

RS Ramya Soundar Rajan Syncfusion Team June 22, 2020 10:12 AM UTC

Hi Caleb, 
 
Greetings from Syncfusion. 
 
We checked the query reported by using some colors in gradient view. And ensured, it has the same output in both the device and the emulator. Since we don’t know how many colors you used in the gradient and also the emulator and device version used. We would like to let you know that we are using the native drawing for gradient as it behaves like in native linear gradient effect for provided input values. 
 
So, can you please share the code or reproducing sample based on your application with device and emulator details? This would be helpful for us to check in our side and give better solution in this. 
 
Regards, 
Ramya S 



CA Caleb June 23, 2020 04:57 AM UTC

This is the XAML code used:
<gradient:SfGradientView>
                                        <gradient:SfGradientView.BackgroundBrush>
                                            <gradient:SfLinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                                                <gradient:SfLinearGradientBrush.GradientStops>
                                                    <gradient:SfGradientStop Color="#150B47" Offset="0.0"/>
                                                    <gradient:SfGradientStop Color="#04020E" Offset="1"/>
                                                gradient:SfLinearGradientBrush.GradientStops>
                                            gradient:SfLinearGradientBrush>
                                        gradient:SfGradientView.BackgroundBrush>
                                    gradient:SfGradientView>
The GradientView is contained within an AbsoluteLayout. Could that have an impact?

Here are the emulator / device settings:




RS Ramya Soundar Rajan Syncfusion Team June 24, 2020 11:09 AM UTC

Hi Caleb, 
 
We have checked the reported issue with mentioned android emulator with the configuration by adding GradientView inside the absolute layout in all possible scenario. But we were not able to reproduce the reported issue. Please find the tested sample from below link. 
 
 
 
So, could you please check the issue with the attached sample and let us know whether it is reproduced or not? If the issue was not reproduced in this sample, please revert us by modifying the sample based on your application along with replication procedure. This will be helpful for us to investigate further and provide you a better solution at the earliest.  
 
Regards, 
Ramya S 


Marked as answer

CA Caleb July 1, 2020 11:58 PM UTC

Apologies for the late reply. I am writing this on an IPS monitor, while my computer at home is connected to an IPS monitor. When I returned here and checked the provided screenshots, the colour banding is non-existent. This is not an issue on your end, but simply due to the lower bit depth of my monitor. Thanks for all your help, however.


RS Ramya Soundar Rajan Syncfusion Team July 2, 2020 07:39 AM UTC

Hi Caleb, 
 
Thanks for your update and we are glad to hear that you have pointed out.  
  
Please let us know if you need any further assistance and don’t hesitate to contact us. 
 
Regards, 
Ramya S 


Loader.
Up arrow icon