RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
News

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.

stylebook1-3522008

 

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   Learn More About Upgrading

About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
DelphiRAD Studio

Learn To Add Custom Text Rendering And Formatting Capabilities To Your Delphi FMX Controls Quickly

CodeDelphiRAD Studio

Quickly Learn How To Optimize Your Delphi Apps With ProDelphi In This CodeRage Replay

DelphiShowcase

Easy-to-use Orbit Simulator Built In Delphi FireMonkey For Learning Gravitational Physics

DelphiShowcase

Powerful Cross Platform Multitrack Music Recording Software Built In Delphi FireMonkey

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES