During my Multi-Device and FireUI CodeRage 9 session this week, I got several questions on how to create a custom FireMonkey style. I thought I would follow up with a blog series on this topic, the first one covering how to customize the style templates that we provide.
Step 1: Open the Bitmap Style Designer
The Bitmap Style Designer can be used to create your own custom FireMonkey styles with support for different resolutions, such as 1x and 2x for iOS, and 1x, 1.5x, 2x and 3x on Android. To access the Bitmap Style Designer, go to Tools->Bitmap Style Designer in the IDE.
Step 2: Create a New Style
Inside the Bitmap Style Designer, select to create a new iOS style for FireMonkey.
Step 3: Export the Style Image from the iOS Template in the Bitmap Style Designer
Step 4: Edit the Graphic in an Image Editing Program
Open the style.png file in your image editing software, such as Photoshop. After you are done making changes, save the updated file as a .png file again.
- Option a) Make changes to graphic and in .style text file (Step #8)
Increase the height of the selected tab graphic. You will need to make this change in both the 1x and 2x graphic. Both of them can be exported from the Bitmap Style Designer and are named ’style.png’.
By making the TRectAnimation style changes (as documented in Step #8 below), the height of the normal (inactive) tab should be the same as the height of the active tab in your updated style.png graphic.
- Option b) Make changes to graphic and skip Step #8
Increase the height of the active tab. For the normal (inactive) tab graphic, leave empty space on top. This is reflected in the two screenshots below. Skip step #8.
Step 5: Import the Updated Graphic into the Bitmap Style Designer
In the Bitmap Style Designer, expand the Images node. Select the style.png file and click the ‘Update’ button on the toolbar. Select your updated png file.
Step 6: Map the Updated Graphic to the Controls in the Bitmap Style Designer
Set the bitmap properties for the tab graphic. To change the bitmap selection, CTRL + click to redefine the image mask.
For Option b above, set the Bitmap (normal/inactive state) and BitmapFocused (active states) properties for the tab object with equal height in the Bitmap Style Designer.
Step 7: Save your template as a .style file.
Before saving the file as the .style file, save your style changes as a .vsf file (File->Save As->VCL Style/ FMX Style Template). .vsf is the template format for FireMonkey styles in the Bitmap Style Designer, which means that you can reopen your style in the Style Designer if you want to make changes in the future.
Next, save your style as a .style file.
Step 8: Customize Style Behavior (only needed with Option 4a)
Open the .style file in the text editor of your choice. Add TRectAnimation for the Padding property for TTabStyleObject inside all tab item sections in the style file ("tabitemstyle", "‘tabitemcustom’", "tabitemmore" and others)
object TLayout
StyleName = ‘tabitemstyle’
object TTabStyleObject
object TRectAnimation
Duration = 0.000009999999747379
PropertyName = ‘Padding’
StartValue.Left = 0
StartValue.Top = 5
StartValue.Right = 0
StartValue.Bottom = 0
StopValue.Top = 0
StopValue.Left = 0
StopValue.Right = 0
StopValue.Bottom = 0
Trigger = ‘IsSelected=True’
TriggerInverse = ‘IsSelected=False’
end
end
Step 9: Apply the Style
Drop a TTabControl onto your form and align it to the client. Right-click on the control and add several TTabItems to it. Place a TStyleBook onto your form. Load the custom .style file that you just edited to it. In the Structure pane, select your Form, then set the StyleBook property to StyleBook1 in the Object Inspector. That will apply the custom style to your application. Deploy your application to your iOS device.
Here is what the style looks like at runtime:
