FMX Style Designer Features
Go Up to FMX Style Designer
This page explains how to create different resources using the FMX Style Designer tool.
Learn how to work with Bitmaps, creating and customizing parameters, and how to style button icons.
Contents
Working with Bitmap Resources
This section explains scale factor management, automatic scale generation, and how to use nine-patch slicing.
Scale Factor Management
Modern applications run on devices with vastly different pixel densities. FireMonkey addresses this through a scale factor system with four standard levels:
- 100%: 1x scale - Standard resolution at 96 DPI (baseline).
- 150%: 1.5x scale - Medium-high resolution at 144 DPI.
- 200%: 2x scale - High resolution displays at 192 DPI.
- 300%: 3x scale - Extra-high resolution displays at 288 DPI.
At runtime, FireMonkey automatically selects the appropriate scale factor based on the actual display's pixel density. Providing all four scales gives users the best possible visual quality across all devices.
Import Scaled Assets
When you have multiple versions of the same image at different resolutions, the designer can recognize and organize them automatically if you follow a simple naming convention. Files named with scale suffixes are automatically assigned to the corresponding scale factor:
[email protected]- 1x scale.[email protected]- 1.5x scale.[email protected]- 2x scale.[email protected]- 3x scale.
To import a complete set, simply drag and drop all the files onto the resource field. The designer recognizes the scale suffixes and organizes them appropriately. If a filename doesn't include a scale suffix, it's assigned to 1x by default, and the designer will prompt when replacing an existing 1x image.
Automatic Scale Generation
In many cases, your design tools export at the highest resolution. Rather than manually creating lower-resolution versions, the designer can automatically generate them. Create images for each resolution you want available, load the highest one, and click the Generate button (magic wand icon). Then, the designer creates appropriate lower-resolution versions through intelligent downsampling.
After generating scales, the designer also attempts to detect appropriate inset values for nine-patch slicing. However, these are just suggestions.
Nine-patch Slicing
One of the critical challenges with bitmap resources is scalability. Nine-patch slicing divides an image into nine regions using inset values (edge measurements that define non-stretchable areas). The four corners are drawn at their original size and never stretched. The four edge regions stretch in only one dimension: the top and bottom edges stretch horizontally, left and right edges stretch vertically. The center region stretches in both dimensions to fill the remaining space.
This allows a small source image (e.g., 48×48 pixels) to scale cleanly to any size while maintaining crisp corners and properly scaled edges.
To configure nine-patch slicing, follow the steps below:
- Select a bitmap resource (start with the 1x scale).
- Locate the inset properties: Top, Left, Bottom, Right.
- Enter values in pixels representing the non-stretchable edge thickness.
- Use the automatic inset detection feature as a starting point if available.
- Verify the result visually in the preview.
- Repeat for other scales as needed (values typically scale proportionally).
Incorrect inset values can cause visual problems, such as stretched corners or distorted edges. Ensure to check the preview at multiple sizes to verify proper stretching behavior.
Creating Parameter Resources
Parameters are the foundation of a maintainable style system. They act as design tokens (named values that can be referenced throughout your styles). When you need to adjust your brand color or change your standard button height, update the parameter value once rather than hunting through dozens of individual styles.
Color Parameters
Color parameters are the most common type to be created. To create a color parameter, navigate to the Colors section in the left panel and right-click or click the add button. Select the "Add Color" option, and be ready to set a name and value.
Ensure to use semantic names that describe the color’s purpose rather than appearance. Common semantic names include:
- ”primary”: main brand color.
- “secondary”: secondary accent color.
- “surface”: background surfaces like panels and cards.
- “on-surface”: text and icons that appear on surfaces.
- “danger”: error states or critical sections
- “outline”: border colors.
Color Format
The designer includes a color picker for visual color selection, or you can enter colors directly in hexadecimal format. The designer accepts multiple flexible formats and automatically converts them to the standard 8-digit format (AARRGGBB):
- ABC: Expanded to FFAABBCC (assumes full opacity).
- AABBCC: Converted to FFAABBCC (assumes full opacity).
- FABC: Expanded to FFAABBCC (includes alpha channel).
- FFAABBCC: Full 8-digit format with alpha channel.
Using the Color Parameters
Once created, color parameters appear in dropdown menus wherever a color property exists. Select the parameter name instead of entering a hex value directly. The designer also provides an opacity override at the point of use.
Text Style Parameters
Text style parameters define your typographic hierarchy. To create a text style parameter, navigate to Text Styles in the left panel and add a new one.
The following are the available configurations:
- Font: The typeface name (e.g., "Roboto", "Segoe UI", "San Francisco")
- Weight: The weight variant of the font.
- Size: The size in points (e.g., 16, 18, 24)
- Slant: The font style angle (Regular, Italic, Oblique)
- Stretch: The horizontal scaling of the font (UltraCondensed through UltraExpanded, with Regular as default)
- Line Height: The vertical spacing for text lines. This property currently has limited FMX support. It can be used to set the height for single-line auto-sized labels in certain styles, but it does not affect multi-line text with word wrapping.
Remember that using a hierarchical naming system makes it clear where each text style should be used and makes it easy to maintain consistency as your application grows.
Size Parameters
Size parameters store dimensional values that should remain consistent across your application. They're essential for maintaining visual rhythm and predictable sizing.
Size parameters are simple, but have a great impact on maintainability. See where to use the Size parameter in the example below.
Component Heights: Standard heights for interactive elements:
- "Button - height - default": 48
- "Button - height - small": 32
- "Input - height": 44
Icon Sizes: Consistent icon dimensions throughout the interface:
- "Icon - size - small": 16
- "Icon - size - default": 24
- "Icon - size - large": 32
Spacing Units: Values for padding and margins, often based on a baseline grid:
- "Spacing - base": 8
- "Spacing - small": 4
- "Spacing - large": 16
Other Dimensions:
- "Corner - radius - default": 8
- "Border - width - standard": 1
- "Elevation - low": 2 (for shadow offsets)
Icon Button Styles
As your style system grows, you may need multiple button variations that differ only in their icons. For example, buttons for add, delete, save, edit, and search actions. Creating separate complete button styles for each would mean duplicating all the same properties (sizing, padding, background, text styling, shadow, animation) dozens of times. The Style Designer includes a special Icon Button style type that solves this specific problem.
How Icon Buttons Work
Icon Buttons are a specialized button style that reference a base button style and only specify which icon to display. This allows you to:
- Create one complete button style with all standard properties (background, padding, text, shadow, animation, sizing).
- Create multiple Icon Button styles that inherit the appearance from that base style.
- Each Icon Button only needs to specify its unique icon.
When you modify the base button style (for example, adjusting padding or changing colors), all Icon Button styles that reference it update automatically.
Create Icon Button Styles
The first step is to create a base button style. Start by creating a standard button style with all required properties. For example, create a style named “ButtonDefault” with standard sizing, padding, background, colors, and effect.
Next, follow the steps below to create Icon button styles.
- Use the left panel to navigate to Styles > Button.
- Right-click and look for the Icon Button style type (separate from the regular button style).
- Select the "Add Icon Button Style" option.
- Give it a descriptive FMX Style Name like "ButtonIconAdd" (remember it must include "button").
- Navigate to the Base Style dropdown option in the Properties panel and select your base button style (e.g., “Button-default”).
- The Icon Button immediately adopts the appearance of your base style
- In the Icon property, specify or create the icon for this button.
- Mark the icon as Is Tintable if you want runtime color control.
Repeat this process for each icon variant you need. Each Icon Button style only stores the icon reference; all other properties come from the base style.
Limitations
The Icon Button feature is not a general inheritance system. It is not possible to perform the following actions:
- Inherit from panel styles, edit styles, or other component types.
- Override individual properties from the base style in the derived style.
- Create inheritance chains (Icon Buttons inheriting from other Icon Buttons).
This is a purpose-built feature for efficiently creating icon button variations. For other types of style variations, you'll need to create separate complete styles.
Advanced Features
This section explores advanced features such as Tintable Icons and Composite components.
Tintable Icons
Icon resources have a special property that significantly increases their flexibility: Is Tintable. When you mark an icon as tintable, the designer uses a special style object (TTintedGlyph) that enables a two-tier color control system.
Tintable icon support depends on the specific FMX control. While controls like TButton and TSpeedButton fully support runtime tinting via the IconTintColor property, other components (such as TMenuItem) may not expose this property even when using a tintable icon style. For components without tinting support, you can still change colors by modifying the style directly, but runtime per-component control is not available.
Understanding the Tinting System
Using the traditional icon styling has a limitation: when setting an IconTintColor on a component (like TButton.IconTintColor), it overrides the style's color definition. This means it is not possible to define a default color in a style and allow selective overrides. It is necessary to set the tint color individually for each component instance, which breaks the parameterization principle.
The new tintable icon system solves this with two levels of control: DefaultTintColor (Style level): Set in the Style Designer, used to recolor the icon by default. This preserves parameterization because all components using this style share the same default tint color. IconTintColor (Component level): Set in RAD Studio on individual components, this overrides the DefaultTintColor when specified. When null, the component uses the DefaultTintColor from the style.
In the Style Designer When configuring an icon resource, enable the Is Tintable checkbox. The designer will use the TTintedGlyph style object in the exported style, which supports the DefaultTintColor property.
In RAD Studio Use the IconTintColor property to override the style’s default on a per-component basis. When set to null, the DefaultTintColor from your style is used.
Not all FireMonkey components support tinting. When you apply a tintable style to a supported component, the tinting properties become visible in the Object Inspector.
Composite Components
Not all UI patterns can be expressed as single-component styles. Some interface elements require composing multiple FireMonkey components with coordinated styles. The designer doesn't create these composite structures automatically, but it provides the building blocks.
For example, to create a typical application bar, the top navigation bar in many mobile and desktop applications, use individual styles for each constituent component using naming conventions that make their relationships clear. Then, using RAD Studio, arrange those components and apply the desired styles on a form.