Working with Native and Custom FireMonkey Styles

From RAD Studio
Jump to: navigation, search

Go Up to Customizing FireMonkey Applications with Styles


Different platforms support different resolutions:

Platform Supported Resolutions
1x 1.25x 1.5x 2x 3x
Windows
Allowed.png
Allowed.png
Allowed.png
macOS
Allowed.png
Allowed.png
iOS
Allowed.png
Allowed.png
Allowed.png
Android
Allowed.png
Allowed.png
Allowed.png
Allowed.png
Note: On iOS, only iPhone 6 Plus and iPhone 6S Plus support 3x 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. Also, FireMonkey applications 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.

Loading Styles at Run Time

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

Delphi:

procedure TForm1.FormCreate(Sender: TObject);
begin
    // ...
    TStyleManager.SetStyleFromFile('Air.style');

C++:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
   //...
   TStyleManager::SetStyleFromFile(L"Air.style");
Note: You need to add the FMX.Styles unit.

Notice that to provide a style along with your application, the best approach is adding the file to the Deployment Manager. Once you add the file, you need to provide the appropriate Remote Path for the different platforms that your application is going to support. For more information about file path functions for the different platforms see Standard RTL Path Functions across the Supported Target Platforms.

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 high-resolution Android devices. There are no additional properties required.

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

Detecting the Mobile Version

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

Example: The following code fragment checks whether the target device is an iOS 8 device or an Android device running Lollipop (5.0). Depending on the OS version, a specific style is assigned.

Delphi:

procedure TForm1.FormCreate(Sender: TObject);
var
  MyStyle: TFmxObject;
begin
{$IFDEF IOS}
  if TOSVersion.Check(8, 0) then
    MyStyle := TStyleManager.LoadFromResource(HInstance, 'iOSBlack', RT_RCDATA)
  else
    MyStyle := TStyleManager.LoadFromResource(HInstance, 'iOSTransparent', RT_RCDATA);
  TStyleManager.SetStyle(MyStyle);
{$ENDIF}

{$IFDEF Android}
  if TOSVersion.Check(5, 0) then
    MyStyle := TStyleManager.LoadFromResource(HInstance, 'RT_DARK', RT_RCDATA)
  else
    MyStyle := TStyleManager.LoadFromResource(HInstance, 'RT_LIGHT', RT_RCDATA);
  TStyleManager.SetStyle(MyStyle);
{$ENDIF}

end;

C++:

void __fastcall TForm1::FormCreate(TObject *Sender) 
{
TFmxObject *MyStyle;

#if (TARGET_OS_IPHONE) 
  if (TOSVersion::Check(8, 0)) 
    MyStyle = TStyleManager::LoadFromResource((unsigned int)HInstance, "iOSBlack", RT_RCDATA);
  else 
    MyStyle = TStyleManager::LoadFromResource((unsigned int)HInstance, "iOSTransparent", RT_RCDATA);
  TStyleManager::SetStyle(MyStyle);
#endif

#if defined(__Android__)
  if (TOSVersion::Check(5, 0)) 
    MyStyle = TStyleManager::LoadFromResource((unsigned int)HInstance, "RT_DARK", RT_RCDATA);
  else 
    MyStyle = TStyleManager::LoadFromResource((unsigned int)HInstance, "RT_LIGHT", RT_RCDATA);
  TStyleManager::SetStyle(MyStyle);
#endif
}
Note: See Add Style-Resources as RCDATA for more information on using resources to load styles on your application.

More information on conditional compilation:

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 Mobile Application

RAD Studio includes the following custom mobile styles:

  • Android:
    • AndroidDark.fsf
    • AndroidLDark.fsf
    • AndroidLDarkBlue.fsf
    • AndroidLight.fsf
    • AndroidLLight.fsf
    • GoogleGlass.fsf
  • iOS:
    • iOSBlack.fsf
    • iOSTransparent.fsf

These styles are installed on your system, next to the Styles directory, in the following platform-specific directories:

 C:\Users\Public\Documents\Embarcadero\Studio\23.0\Styles\iOS
 C:\Users\Public\Documents\Embarcadero\Studio\23.0\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 for:

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

In addition, you can get new FireMonkey styles that are available in the FireMonkey Premium Style Pack, which also support 3x resolution for iOS 8 devices.

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 multi-device application

  1. Create a Multi-Device Application.
  2. With the Master view selected, add a TStyleBook component to your form.
  3. On the Master view, select a style from the Form Designer Style drop-down menu (Windows, macOS, iOS, or Android). This example uses Android style for the Master view:
    SelectAStyle.png
  4. Load a FireMonkey style file for the appropriate platform:
    1. Double-click the StyleBook. The FireMonkey Style Designer opens.
    2. Click the Open Style button on the toolbar of the FireMonkey Style Designer.
    3. Navigate to the FireMonkey style file you want.
      For example, if Android is the Form Designer style set for the current view, you would load and assign an Android style such as AndroidLight.fsf.
      Note: The FireMonkey styles for the various Form Designer styles are located in parallel directories:
      Windows: C:\Users\Public\Documents\Embarcadero\Studio\23.0\Styles
      Android: C:\Users\Public\Documents\Embarcadero\Studio\23.0\Styles\Android
      iOS: C:\Users\Public\Documents\Embarcadero\Studio\23.0\Styles\iOS
  5. Switch to each of your created views, select the TStyleBook component in that view, and load the custom style related to that platform. When working with custom FireMonkey styles, each view, including the Master view, must have a style assigned in the Form Designer.
    That is, load a Windows style for the "Windows Desktop" view, an Android style for the "Android..." view, a Mac style for the "macOS Desktop" view, an iOS style for the "iPad" and the "iPhone" views.
    Note: If you have different views for iPad and iPhone, you need to load the same iOS style for each view.
  6. To use the custom style instead of the native style on a form, you need to assign the stylebook you want to use to the form at design time:

Using Custom Styles on Multiple Forms

To apply the same custom style to all the forms of an application, instead of doing it at design time setting the StyleBook property of each form, you can do it at run time using the UseStyleManager property.

To use the same custom style on all the forms of an application.

Using Custom Styles on Controls in Multiple Forms

An application may have more than one TStyleBook object, then different forms may use the StyleBook property to reference any of these stylebooks, one at a time. Notice that controls in any form can always use the StyleLookup property to specify any custom style defined in any TStyleBook object used in the current project group.

See Also