Create A Custom Styled Firemonkey Component With The Delphi IDE

Andrea Magni has a blog post up that explains a simple method for creating a custom styled control using the Delphi IDE. This lets you bypass the Style Designer. The sample control that he builds is called TGmailLabel because it has a similar look and feel to an element from Gmail. The interesting thing here is that he builds the control that he wants on a normal FMX form and then does ‘View as Text’ on the form to get to the form objects as text. He then copies the form objects as text and puts them straight into a style file. Apparently form objects as text and style files have very similar formats. It looks like the component names are stripped out, any positioning of the main object is removed, and a StyleName line is added to each object. Here is a sample of the style below:
object TLayout
StyleName = 'GMailLabelstyle'
Height = 25.000000000000000000
Width = 100.000000000000000000
object TRectangle
StyleName = 'labelRect'
Align = alClient
Height = 25.000000000000000000
Sides = []
Width = 75.000000000000000000
object TText
StyleName = 'labelText'
Align = alClient
Color = claBlack
Height = 21.000000000000000000
HitTest = False
Margins.Left = 2.000000000000000000
Margins.Top = 2.000000000000000000
Margins.Right = 2.000000000000000000
Margins.Bottom = 2.000000000000000000
Text = 'label'
Width = 71.000000000000000000
end
The example source code comes with the free TGmailLabel control so you get a free Delphi Firemonkey component too. The resulting component is cross platform and works on IOS, Android, OSX, and Windows. The blog is in Italian and the link auto translates it for you via Google Translate.

Check out the full blog post on how to build your own custom styled component.

Here is a mirror of the example source if the original goes down: Delphi Firemonkey GmailLabel Component