Get access to over 100 FireMonkey cross platform samples for Android, IOS, OSX, Windows, and Linux!

AndroidAppmethodCode SnippetDelphiDemoFiremonkeyIOSOSXWindows

Build A Progress Spinner Using Objects In Delphi XE6 Firemonkey On Android And IOS

| Delphi 11 10 XE8 XE7 XE Seattle Berlin Tokyo Rio Firemonkey Delphi Android Delphi IOS

Delphi XE6 Firemonkey Progress Circle Tutorial | Delphi 11 10 XE8 XE7 XE Seattle Berlin Tokyo Rio Firemonkey Delphi Android Delphi IOSDeveloper OneChen has a demo project up on GitHub showing how to build a progress circle using basic Firemonkey components. As you can see in the featured image it is a circle with a percentage in the center and a progress line around the inside of the circle. It is composed of a TCircle component with a TArc, a TCircle, and a TText component nested inside of it. These components are available in Delphi XE5, Delphi XE6, C++Builder, and AppMethod. They should also work on all four platforms (Android, IOS, Windows, and OSX) The TArc makes up the white line on the inside that appears to move around the circle. The round ends of the TArc are achieved by changing the Stroke Cap property to Round instead of Flat. The progress of the line is controlled by simply changing the angle of the TArc component. As you change the angle the line appears to move around the circle. Other notable properties of the effect are Stroke Thickness which controls the size of the line and it is set at 15. And lastly the StartAngle property of the TArc is set to -90. The TCircle in the center is just set to align Client and so is the TText which contains the percentage. The object is built up using other objects so it would be easy to customize the colors to your needs. You could also easily include this code with a TTimer or anonymous thread to replace TAniIndicator if that component doesn’t suite your needs. Here is the code that handles the progress setting of the TArc component:

procedure TForm1.TrackBar1Change(Sender: TObject);
     if TrackBar1.Value <> 0 then
          Arc1.EndAngle := 360 / (100 / TrackBar1.Value)
     else Arc1.EndAngle := 0;
     Text1.Text := Trunc(TrackBar1.Value).ToString + '%';

Head over and check out the full Delphi XE6 Firemonkey progress circle demo project and download it from GitHub.

Have Delphi Firemonkey questions? Ask and get answers on StackOverflow.

Related posts

AutoBlogAI: FireMonkey Client To Leverage LLMs And Generative AI For Blogging


Unleashing Creativity With Song Writer AI: A Deep Dive


How To Build Stable Diffusion Text To Image Prompts


FireMonkey 10.4.2 Features Updated iOS 14, Android 11, And macOS 11 Support Plus Hundreds Of Fixes

Sign up for our Newsletter and
stay informed

Leave a Reply