Gauge rendering differences between iOS and Android

[Ken Ross]

Hello, I have a gauge that I'm using (SfCircularGauge) for my app on iOS and Android. I'm using the "North" gauge type and have two ranges setup with a Thickness of 25. I also have a NeedlePointer setup on the gauge (Thickness=15, Knobradius=25, Type=Triangle) and a Header.

What I'm seeing is a large difference between how the gauge is rendered on iOS and Android, both in terms of thickness of the ranges but also the needle pointer; it looks great on iOS and everything is too thin on Android. Also, on the Android side the corners of the gauge are being cut off and on the iOS side the Header isn't showing up. This is all using the latest release of the controls.

I had thought I might be able to work around the problems by using platform-specific markup but I can't seem to get that working; I'm guessing that the "Thickness" property that's exposed on the control isn't the same property name on the native control. This is the XAML syntax I'm trying (again, to work around the fact that the control doesn't render correctly by default):

                  <gauge:Range StartValue="0" EndValue="2200" Color="Green">
                    <OnPlatform x:TypeArguments="Thickness">
                      <OnPlatform.iOS>25OnPlatform.iOS>
                      <OnPlatform.Android>50OnPlatform.Android>
                      <OnPlatform.WinPhone>25OnPlatform.WinPhone>
                    OnPlatform>
                  gauge:Range>

Here are screen shots of the different ways the gauge is looking under iOS and Android with the same settings:

http://1drv.ms/1FNw3sZ

http://1drv.ms/1KdXrzG

[Nijamudeen Mohamed Sulaiman]

Hi Ken,


Thanks for your interest in Syncfusion products.

Regarding Android Rendering:
Based on your provided screenshot for Xamarin (Android), we suspect that CircularGauge corner cropping issue occurs due to overlapping in layouts. It can be resolved by setting HeightRequest/WidthRequest or Padding of CircularGauge control.

If it does not meet your requirement, Could you please provide us issue reproducing sample along with its replication procedure? It will be helpful for us to analyse on it and provide you the possible solution.

RangePointer thickness in Cross platforms:
We are unable to reproduce the mentioned issue with range pointer thickness. RangePointer Thickness can be adjusted between cross platforms using OnPlatform of Xamarin. We have modified the provided code snippet. Please refer the code snippet below.

Code Snippet:

XAML:

RimThickness:

<gauge:Scale.RimThickness>

<OnPlatform x:TypeArguments="x:Double"

iOS="40"

Android="60"

WinPhone="60" />

</gauge:Scale.RimThickness>

RangePointer Thickness:
<gauge:Scale.Pointers>

<gauge:RangePointer Value="2200" Color="Green">

<gauge:RangePointer.Thickness>

<OnPlatform x:TypeArguments="x:Double"

iOS="40"

Android="60"

WinPhone="60" />

</gauge:RangePointer.Thickness>

</gauge:RangePointer>

</gauge:Scale.Pointers>

Regarding iOS gauge header:
We have analysed your provided screenshot for Xamarin (iOS) which has background colour as white colour. Based on the implementation of SfCircularGauge header`s default foreground is white. So it seems like Gauge headers is not visible in white background. It can be resolved by changing the gauge foreground colour. For that please refer the code snippet below.

Code Snippet:

XAML:
<gauge:Header Text="Consumed" Position="0.3,0.9" TextSize="32" >

<gauge:Header.ForegroundColor>

<OnPlatform x:TypeArguments="Color"

iOS="Gray"

Android="Gray"

WinPhone="Gray" />

</gauge:Header.ForegroundColor>

</gauge:Header>

</gauge:SfCircularGauge.Headers>

Please let us know, if you have any concerns.

Regards,
Nijamudeen M.

[Ken Ross]

Thank you for the code snippets - that helped me work around the rendering problems but it's not ideal; the gauge shouldn't render so differently between iOS and Android - I should not need to use platform specific values to try and make it look correct.

The problem with the Header not showing up on iOS is not due to the color of the header - as you can see in the screen shots I sent, the color of the header was set to green [not white] and so should have shown up just fine on the white background that both iOS and Android have.

For the problem with the corners being cut off on the gauge, I've included a sample that shows this behavior. Again, this only shows up on Android.

Thanks much for the help!

Attachment: GaugeClippingExample_KCR_57_80c19d69.zip

[Nijamudeen Mohamed Sulaiman]

Hi Ken,

Sorry for the inconvenience caused.

Regarding Android cropping issue:

We have analyzed the provided sample and found that the RimThickness of gauge is lesser than the circular gauge RangeThickness. Based on the implementation of SfCircularGauge, CircularGauge is start rendering respected to its Gauge Rim in Xamarin (Android). When the Circular gauge RangeThickness is more than the RimThickness, range will render on the gauge rim and it makes the gauge cropping at the edges. It can be resolved by set the thickness for rim or setting offset (0-1) for range. Please refer the following code snippet.

Xaml:

RimThickness:
<gauge:Scale StartValue="0" EndValue="100" Interval="10" StartAngle="180" SweepAngle="180" RimColor="White" RimThickness="50" LabelColor="White">

Range Offset:
<gauge:Range StartValue="0" EndValue="2200" Color="Green" Offset="0.2" >

Even though we consider this CircularGauge Range cropping and we have created an incident for this. Please have follow up with the incident.

Regarding iOS header issue:

We are able to reproduce the mentioned issue with Circular gauge Headers is not displaying and we have created an incident for the same. Please have follow up with the incident.

Please let us know, if you have any queries.

Regards,
Nijamudeen M.

[Helmut Lubik]

Hi,

I've a similiar problem with rendering differences

On iOS:


On Android:



On Android, ticks are not showing, Label-offsets and Headersizes are to different.
Any ideas ?

Helmut

[Nijamudeen Mohamed Sulaiman]

Hi Helmut,

Sorry for the inconvenience Caused.

Regarding RangePointer behavior:

Based on the implementation SfCircularGauge, RangePointer will overlaps the circular gauge elements such as Range and ticks. So RangePointer rendered properly in Xamarin (Android). We are able to reproduce the mentioned issue with RangePointer rendering in Xamarin (iOS) and we have confirmed this as bug and logged a report on this. Also we have created a support incident under your account to track the status of this issue.

Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Regarding Label Offset and Header size:
We have already found the issue With Label offset and header sizes differs in cross platforms. We will fix this issue and the issue fix will be available in our upcoming Service Pack 2 which is expected by the end of this month. We appreciate your patience until then.

Please let us know, if you have any queries.

Regards,
Nijamudeen M.

[Jeff Dalby]

Am I correct that these fixes did not make it into service pack two?  I've just started using SfCircularGauge and am seeing that there are major differences in appearance between Android and iOS Xamarin forms.  The width of Range pointers is different and offsets/header sizes are different as well. This is using 14.2451.0.26.

[Subburaj Pandian Veluchamy]

Hi Jeff,

Thanks for your interest in Syncfusion products.

We have created a support incident under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know, if you have any query.

Regards,
Subburaj Pandian V.