Working with Native and Custom FireMonkey Styles

From RAD Studio
Jump to: navigation, search

Go Up to Customizing FireMonkey Applications with Styles

The various supported target platforms (Windows, Mac OS X, iOS, and Android) can support different resolutions at run time:

  • The Mac OS X and iOS platforms support the Retina display (2880×1800 or 5.2 megapixels), which doubles the standard resolution. So Mac and iOS support two different resolutions: 1x, 2x.
  • The Android platform supports four different resolutions: 1x, 1.5x, 2x, 3x.
  • Windows supports only standard resolution.

FireMonkey applications automatically load and display the appropriate native style at run time (depending on the target device), without you needing to add a stylebook or any code. In addition, FireMonkey applications for Mac OS X, iOS, or Android can have custom styles that display well on high-resolution displays as well as standard-resolution displays. High-resolution styles (such as Retina) are only shown at run time.

The FireMonkey styles now support all the required resolutions, and the appropriate style is loaded at run time. For example, an Android app can display in any of four resolutions (1x, 1.5x, 2x, 3x), so all of these resolutions are supported in the AndroidDark.fsf style for Android.

Loading Styles at Run Time

To apply a specific style to a form, programmatically call TStyleManager.SetStyleFromFile. For example:

procedure TForm1.FormCreate(Sender: TObject);
    // ...

High-Resolution Styles Are Automatically Used in FireMonkey 3D Applications

All FireMonkey 3D components automatically display in hi-res mode when run on iOS Retina devices or on high-resolution Android devices. There are no additional properties required.

FireMonkey 3D components include TForm3D, TViewport3D, and TLayer3D.

Detecting iOS 6 and iOS 7

To detect the iOS version being used on the target iOS device (and to assign an appropriate available style at run time), use the TOSVersion.Check method as follows.


    if TOSVersion.Check(7, 0) then
        Style := TStyleManager.LoadFromResource(HInstance, 'iOS7Jet', RT_RCDATA)
        Style := TStyleManager.LoadFromResource(HInstance, 'iOSJet', RT_RCDATA);

In the FireMonkey Mobile Form Designer, you can select a specific iOS design device and a specific iOS version (6 or 7):

Design Device Selector for iOS

Loading Your Own Custom Styles

The instructions below describe working with custom styles, such as the Jet style, which is available in the FireMonkey premium style pack.

Adding a Custom Style to Your FireMonkey Application

RAD Studio includes several custom mobile styles, including iOSBlack.fsf, iOSTransparent.fsf and AndroidDark.fsf, which are installed on your system, next to the Samples directory, in the following platform-specific directories:

 C:\Users\Public\Documents\RAD Studio\<n.n>\Styles\iOS
 C:\Users\Public\Documents\RAD Studio\<n.n>\Styles\Android

The custom mobile styles for iOS and Android include support for standard- and high-resolution devices within one style file. This includes built-in support support for:

  • iOS standard and iOS Retina devices (1x, 2x)
  • Multiple resolutions for Android devices (1x, 1.5x, 2x, 3x)

On the desktop, this is also true for the custom Jet and Diamond Mac styles, which are available in the FireMonkey premium style pack; these styles include support for both Retina and non-Retina MacBook devices within one style file.

To add a custom style to a FireMonkey mobile app:

  1. Create a FireMonkey Mobile Application.
  2. Place a TStyleBook component on the form.
  3. In the Target Platforms node of the Project Manager, set the target for your app.
    This step is critical for setting up a platform-specific stylebook.
    For example, double-click iOS Device if you are setting a style that you want to be used on an iOS device:
  4. After you set the target platform, double-click StyleBook1 in the FireMonkey Mobile Form Designer. This opens the FireMonkey Style Designer.
  5. Click Load in the FireMonkey Style Designer:
    1. Navigate to the location of your custom style.
      Tip: The installed location of the FireMonkey custom styles is given above.
    2. Select the .fsf or .style file.
    3. Click Apply and Close in the FireMonkey Style Designer.
  6. When you want to build your app for a given platform, you need to assign the stylebook, as follows:
    1. Select the FireMonkey form in the FireMonkey Mobile Form Designer.
    2. In the Object Inspector, select the StyleBook property of the form.
    3. Select StyleBook1 in the drop-down menu in the Value field:
      StyleBookSelecting.png  StyleBook2.png

Loading Custom Styles to Support Multiple Platforms in One Application

Only one style can be in use at a time, but your app can have more than one style in project resources. This example demonstrates one way to enable platform-specific styles in a shared code base.

Perform the following steps:

  1. Add your custom styles to the project resources:
    Select Project > Resources and Images.
    • The Resources dialog box is displayed:
    • In this dialog box, you can add *.style or *.fsf files as the RC_DATA type, and you can set the identifier for each resource item.
    • You need to add a style for each platform that you want to support (Windows, Mac OS X, Android, and iOS).
  2. Load your custom Windows style in Resources. Set the identifier to Win<StyleName>.
    1. Click Add, and navigate to the location of your custom styles.
    2. Select the style to use for Windows, and click Open.
  3. Load your custom Mac style and set the identifer to Mac<StyleName>.
  4. Load your custom Android style and set the identifer to Android<StyleName>.
  5. Load your custom iOS style and set the identifier to iOS<StyleName>.
  6. At run time, execute the following code (shown in the OnCreate event handler as an example):
procedure TForm1.FormCreate(Sender: TObject);
    Style: TFMXObject;
        Style := TStyleManager.LoadFromResource(HInstance, 'WinJet', RT_RCDATA);
        Style := TStyleManager.LoadFromResource(HInstance, 'MacJet', RT_RCDATA);
    {$IFDEF Android}
        Style := TStyleManager.LoadFromResource(HInstance, 'AndroidJet', RT_RCDATA);
    {$IFDEF iOS}
        Style := TStyleManager.LoadFromResource(HInstance, 'iOSJet', RT_RCDATA);  
    if Style<> nil then
Note: You must add FMX.Styles to your uses clause.

See Also