A Delphi developer asked how do you change the background color of a FMX (FireMonkey) TEdit ?

As many know, for a VCL TEdit, you could just set the color property of the TEdit, like this:

Then at Run-Time, after calling Edit1.Color := clYellow, the Edit1 looks like this:

But, a FMX TEdit does not have a Color property, so how do you do the same for a FMX TEdit?

There are a few options on how you can do this with a FMX Tedit:
1. One way is to use FMX styling, and you can control the properties StyledSettings, StyleLookup and StyleName.
2. Create a new FMX style, using the FireMonkey Style Designer, with a copy of the component and switch at runtime.
3. Right-Click on your Edit1 on your FMX Multi-Device Form, and select “Edit Custom Style“.

Here we will look at this option #3, by using “Edit Custom Style“.

Select your TEdit on your FMX Multi-Device Form, Right-Click and select Edit Custom Style.  After you click on Edit Custom Style, you will see your TEdit open in the Style Designer, like this:

This will give you a Structure Pane for your FMX Edit1, that looks like this:

As we see in the Structure Pane above, FireMonkey (FMX) controls are arrangements of a tree composed of sub controls, primitive shapes, and brushes, decorated with effects. These compositions are defined as styles, stored in a style book. The individual elements of a style are internally called resources; because that term has several other meanings, the term style-resource is used for clarity. Styles provide a great deal of customizations without sub classing.

From here, you can customize the FMX TEdit style any way you want.

For example, in your Structure Pane, you see your Edit1Style1 has a background element. You can put a TRectangle inside the TEdit style, and then use the Fill.Color property of the TRectangle to change the background color of your FMX TEdit, following these steps:

On your FMX Form with your Edit1, use the Tool Palate and select and drag a TRectangle onto your Edit1, like this:

Next, position / rearrange the TRectangle inside the TEdit, like this:

Now, in the Structure Pane, if you set the StyleName of the TRectangle, inside your FMX TEDIT to any name, like “Rectangle_background“, then you can use the FindStyleResource to find the linked resource object for the style specified with the name: “Rectangle_background“, like this:

Select the Rectangle1 in the Structure, and use the Object Inspector, and change the property Name = Rectangle_background:

Here is the Style Designer, showing the TRectangle inside the TEdit:

The FireMonkey styles that are provided with the product are saved in .Style files located in default Redist folder: C:Program Files (x86)EmbarcaderoStudio21.0RediststylesFmx or in your C:UsersPublicDocumentsEmbarcaderoStudio21.0Styles folder.

Save your new FireMonkey Style (*.style) in your Styles folder (C:UsersPublicDocumentsEmbarcaderoStudio21.0Styles) with any name, such as FMXEdit_Color.

Now, to use your new Style on your FMX Form, set the StyleName property of your FMX Form to the new FMXEdit_Color style you just created:

Now, at runtime, when you call TRectangle(Edit1.FindStyleResource(‘Rectangle_background’)).Fill.Color := TAlphaColorRec.Yellow, with code like this, for example:

Your FMX TEdit, now gets the Yellow background color, like this:

This example helps to show one possible option on how to customize the FMX styles.

As we mentioned already, FireMonkey (FMX) controls are arrangements of a tree composed of sub controls, primitive shapes, and brushes, decorated with effects.

Note: FMX is multiplatform so you need to make a style for each platform for which the program is intended. For this example, we only created the new Style for the Windows platform:

As we have seen, all controls in FireMonkey (FMX) are style-able via the styling system. This is accomplished by attaching a TStyleBook to the form, and the style is loaded and applied to the form.

Some additional useful references are:

“Cross-platform development the FireMonkey way”.

“FireMonkey – RAD Studio”.

“TMS mCL Software”. – Set of components for true native macOS application development.

“FMX.Controls.Presentation.TPresentedControl.ControlType – RAD Studio API Documentation”.

“VCL vs. FireMonkey” Pod-Cast.

“FireMonkey Platform Prerequisites”.

---

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

   Free Delphi Community Edition   Free C++Builder Community Edition

---