Site icon Embarcadero RAD Studio, Delphi, & C++Builder Blogs

Creating custom TEdit styles with the FireMonkey Style Designer

 

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: 

 

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

 

Exit mobile version