RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
Delphi

Changing FireMonkey style at runtime

Author: Pawe Gowacki

Last month Sarina DuPont blogged about loading custom FireMonkey styles on a mobile device at runtime (“How to load custom styles at runtime“). That’s a very interesting approach to compile a custom style as a resource into the mobile app.

This week there was another blog post by David I about the availability of the new great looking mobile FireMonkey InfoPower grid component for registered Delphi XE5 users and also a demo app available at Google Play Store. I have immediately installed this demo app on my Nexus 7 Android device to show it to programmers in Bratislava. A very nice option in the demo is a possibility to switch between FireMonkey styles at runtime.

I just could not resist building a quick demo app that would mimic the style switching behaviour of the InfoPower demo app:-)

When you install RAD Studio XE5 or Delphi XE5 there are also installed custom styles that you can use in your projects. By default you can find custom style files in C:UsersPublicDocumentsRAD Studio12.0Styles folder. There is “Dark” custom style for Android and “Black” and “Transparent” custom styles for iOS. Beyond these styles registered Delphi XE5 users can also download and use “premium” styles that are available as a separate download (“FireMonkey XE5 Premium Style Pack Is Now Available”). This will add “Jet” and “Diamond” styles for both Android and iOS to the mix. To make my life easier I have copied these premium style files to same folders as pre-installed styles.

Now I need to give a try. Instead of starting from scratch it is easier to adapt and extend an existing app that already has different types of mobile controls to see custom styling in action! The best demo for this is “MobileControls” project that is installed as part of Delphi XE5 install. In default installation you can find it in C:UsersPublicDocumentsRAD Studio12.0SamplesFireMonkeyMobileControls folder.

The first thing to do is to add all custom styles to this project as resources.

I have added all available styles to the project. The very important step here is to make sure that the “Resource Identifier” of every style matches exactly the filename of the style, because in code I’m going to refer to resources through their identifiers.

The “MobileControls” demo project contains main TabControl component with a number of tabs that showcase different types of mobile FireMonkey controls. Just right-click on the “TabControl1” and select to add a new “TTabItem”. I have the “Text” property of this new tab item to “Styles” and added a TComboBox component that I have named “ComboBoxStyles”.

In the form’s “OnCreate” event I need to add code to populate this combo box with different styles depending on the platform for which this project will be compiled. There are different styles for Android and different for iOS!

I also need a event handler of the “OnChange” event for the combo box to load a different style from a resource. You also need to make sure to add “FMX.Styles” unit to the “uses” clause of the form.  I have ignored iOS 7 styles for time being. There is also a small helper function “AddComboItem” that adds an item to combo box with a given text.

Save All. Now we can run this project on Android and on iOS to see the styles in action!

Let’s start from Android. This is how my demo looks on Android. Select the style first.

Android Default style:

Android Diamond style:

Android Jet style:

Android Dark style:

Now let’s try with iOS! This is how our app looks in the iOS Simulator. Select style first!

iOS Default style:

iOS Diamond style:

iOS Jet style:

iOS Black style:

iOS Transparent style:

That’s really powerful! Building mobile apps with Delphi XE5 is pure fun.


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

Related posts
DelphiRAD Studio

Get Started Building Cross-Platform Games In Delphi FireMonkey With Alien Invasion Sample

C++Delphi

Ultimate Compression Toolkit For Delphi And C++ Builder Developers

DelphiRAD Studio

Learn To Add Custom Text Rendering And Formatting Capabilities To Your Delphi FMX Controls Quickly

CodeDelphiRAD Studio

Quickly Learn How To Optimize Your Delphi Apps With ProDelphi In This CodeRage Replay

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES