FireMonkey – TArc and Retina, not the best of friends

Last week I noticed a post on that showed a different UI for a progress bar. So instead of starting work on something I should have, I turned the code into a component and added the ability to change the colours used when displayed.

I’d known TArc didn’t render nicely on a Retina device because I was using it to render a navigation UI concept. Which I’ve had to shelve because of this issue.

The control does look good under other platforms (untested under Android – issues not anticipated though).

You can download the full source code for the control from the Quality Central report lodged for the rendering issue. It looks like you will need to use a native client to download from the QC report as it doesn’t look like you can from the web client.

The control has the following “license” in the main unit:


TCircleProgress is based on code made open source by developer OneChen.

Original Code Link:
How I found out link:

Developer of this component: Jeremy North (


Disclaimer: This code is provided free of charge, bugs and all.





The Windows capture actually shows another drawing bug with FireMonkey. Notice how the rectangle at the top has two black dots in the top left and top right corners. This happens when you eliminate sides from a rectangle and maintain one full side to be drawn. Something that I’ve reported previously.

Report No: 122616 (RAID: 47827) Status: Open
Removing Sides can leave unwanted dots in corners






NOTE: This isn’t an issue for just TArc though, it is an issue with the GPU canvas. In previous versions, you could disable the usage of the GPU canvas, however with XE6 – the option to switch it off has been deprecated.


Zoomed view under iOS


Report No: 126186 (RAID: 52756) Status: Open
[Retina] [iOS] TArc doesn’t rendering nicely on a Retina device


Reported and opened. Hopefully in the next release, this rendering issue is addressed.


  1. Canneloni says:

    Bug report QC?

  2. Thomas Grubb says:

    Hi Jeremy, If I had to guess, these are not issues with Rectangles with sizes (and probably the TArc too). I have a feeling that these are more basic and have to do with the StrokeJoin and StrokeCap. It has been awhile but I remember when developing my SVG components that Mobile FMX did not support the TStrokeCap.Round or the TStrokeJoin properly for all values (I forget which one).


    • JED says:

      It isn’t only that the cap isn’t supported, it is the jagged appearance of them. It is like the GPU canvas doesn’t support high resolutions. This isn’t an issue if you disable the GPU canvas on mobile (iOS at least) but that is now deprecated and can cause other issues.

  3. visli says:

    I encountered the same problem with you?
    I changed the TArc’s color style:

    object Arc1: TArc
    Stroke.Kind = Gradient
    Stroke.Gradient.Points =
    Stroke.Gradient.StartPosition.X = 0.500000000000000000
    Stroke.Gradient.StartPosition.Y = 1.000000000000000000
    Stroke.Gradient.StopPosition.X = 0.499999970197677600
    Stroke.Gradient.StopPosition.Y = 0.000000000000000000
    Stroke.Thickness = 20.000000000000000000
    Stroke.Cap = Round
    Width = 233.000000000000000000

    The gradient color can not be displayed on my android mobile.

  4. Tony says:

    Hi Jeremy,

    I too have encountered the dots in the corners problem. While it seems odd for corners to be rendered when you have X/Y Radius of 0 I think that is the problem. Have you tried turning all the corners off? I just checked this on XE5 and that makes them go away for me.

    • JED says:

      Excellent, that works in XE6. A still consider it a bug but at least there is a workaround for the moment.


  5. Jack says:

    Patience and a generous understanding of how Navigation UI concept function will benefit those interested in Quality Central report. These developers maintain Navigation UI concept, GPU canvas and Quality Central report.