Creating custom TEdit styles with the FireMonkey Style Designer

This tutorial outlines the steps for creating and customizing a new FireMonkey style element and applying the newly created style to your FireMonkey application. This tutorial focuses on deploying the resulting application to iOS, but the same steps can be repeated for creating custom style elements for macOS, Android and Windows applications.

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, 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.

Comments

jonathan O40181
Monday, 12 February 2018

I love Delphi

Rolf W7058
Tuesday, 30 January 2018

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.

Sarina D
Tuesday, 6 February 2018

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.