1) Apply a custom style

Create a new FireMonkey multi-device application. Drag and drop a TStyleBook component onto your form, and set the form’s StyleBook property to StyleBook1. Next, double click on the StyleBook component. This will load the integrated Style Designer. Click the Open button to select a custom style. This tutorial uses the iOSEmeraldCrystal style from the premium style pack.


2) Design your user interface

My application UI consists of the following UI controls: 

  • TImage, aligned to Client, used as the background graphic. Opacity is set to 0.3. Image shown is from Pexels.com
  • TListBox, aligned to Contents, used as a container for a number of UI controls
    • TLabel (“Welcome”), aligned to MostTop
    • TLabel, aligned to Top
    • TImage, aligned to Top (login screen icon/app icon)
    • TEdit (“passwordedit”), aligned to Top, with Left and Right Margins set (60px)
    • TEdit (“useredit”), aligned to Top, with Left and Right Margins set (60px)
    • TButton, aligned to Top, with Left and Right Margins set (60px)
    • Two TLabels for signing up for an account or retrieving a forgotten password


3) Customize the FireMonkey style

Double-click on StyleBook1 to bring up the integrated Style Designer. Since the custom style we loaded is an iOS style, we need to select “iOS” from the Platform drop-down menu.

Next, right-click on editstyle in the Structure pane and select Edit > Copy. Select StyleContainer in the Structure Pane and select Edit > Paste.


Next, change the Stylename to something that matches the new functionality, , i.e. usereditstyle.


To add a glyph icon to the new style element, select it in the Structure pane, then drop a MaskedImage component from the tool palette on it. Select MultiResBitmap and browse to the icon on disk. The icons used in this tutorial are from Icons8.com.




Next, select content from the Structure pane and set the Left margin. In this example, it was set to 30 px. This is designed to allow for enough spacing between the newly added icon and the text input cursor to ensure they don't overlap. Optionally, you can change the color of the caretcolor to match your custom theme colors.



When done, click on the ‘x’ in the top right hand corner and select OK when prompted to Apply Changes to the style.


4) Deploy to your target device

When done, deploy the application with the custom FMX style to your target device.   



Shown: Login screen with custom TEdit styles running on iOS 11


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder. Design. Code. Compile. Deploy.

Start Free Trial   Free Delphi Community Edition   Free C++Builder Community Edition   Upgrade Today  

  • I've tried creating custom styles in the past and I'm having a real hard time with one thing. Whenever I have a custom style with an image/glyph in it I can't figure out the correlation between the width and height of the image vs that as defined in the style. The images always seem to render larger (stretched) vs what is defined in the style. Is there a rule of thumb to guide me on how to correctly define image styles so that they render correctly? True Image Size vs defined Style size?
  • Hi Rolf, Thanks for your feedback. I am glad you found the post helpful. I will consider covering reusable custom styles in a future blog post. In terms of elements to use in a style, please see the components listed under 'Styles' in the tool palette. Regards, Sarina
  • Nice article, thank you very much. I would use TGlyph rather than a MaskedImage, so to be able to set ImageLists at runtime. The style elements can be accessed and set via runtime too. Is there anything wrong with using the custom styles with Glyphs in a more code-related way ? Since I'm always unsure what elements I could use safely in a Style, and which ones should be avoided, it would be nice to get this question clear too. Maybe you can also prepare such a nice post for an easily "re-usable" custom style, also with changing glyphs on the fly. Moreover to clarify what would be the right places to touch the style elements at runtime, beside OnApplyStyleLookup.