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