FireMonkey Mobile Form Designer

From Appmethod Topics
Jump to: navigation, search

Go Up to Form Designer

FireMonkey Mobile Form Designer, with the iPhone (4) design-time device loaded in vertical orientation and with the device background enabled

The Mobile Form Designer (also known as Mobile Designer) is displayed automatically when you are creating or editing a FireMonkey mobile form. To shift focus to the Mobile Designer when you have a mobile form open in the IDE, click the Design tab on the lower edge of the main editing window: CodeDesignHistoryTabs.jpg

Many features that the Form Designer provides for FireMonkey desktop forms are also available on the Mobile Designer as well. For example, visual and nonvisual components are handled in the same fashion, and the entries in the context menu are the same. For details, see Form Designer.

Design-time Devices

You can select a design-time device (the mobile form used at design time) by using the design-time device selector, located in the upper right corner of the Designer:

You can select a design device as follows:

  • A design-time iOS device—iPhone, iPhone 5, or iPad—and the iOS version (iOS 6 or iOS 7):
  • A design-time Android device, such as Google Nexus 4 or Samsung Galaxy S2:
    Design Device Selector for iOS

Design-time devices are preset design-time forms that give you an idea of the final look of your form on a specific device or form factor running Android or iOS. Design-time devices show a device background, and display the design surface over that background. The Mobile Designer restricts the design surface to the dimensions of the selected design-time device, so that the content of the current form adapts to the form factor of the selected design-time device. Unless your form is configured to use a custom style, the FireMonkey Mobile Form Designer loads the style of the platform of the selected design-time device .

Design-time devices do not affect compilation, because they are not meant to specify the final dimensions or look-and-feel of your form. When you deploy your application to a mobile device, the form dimensions are adjusted to match the physical device, regardless of the last design-time device you were using.

However, the design-time device dimensions are used if the target platform at run time is not a mobile platform. For example, if you are designing your form with the iPhone design-time device, and you run your application on Windows, your application's window starts with the dimensions of an iPhone screen.

Design-time Device: Google Nexus 4 (Android)

XE5AndroidLook 1.png

Design-time Device: iPhone 5 (iOS)

XE5iOSLook 3.png

Note: For iOS devices, you can select the version of iOS to be used at design time.
  • Use the designer toolbar to select and manage the design-time device.
  • You can also:
  • To hide the device status bar, so that the design area extends over it, configure the BorderStyle property of the form as None. The Mobile Designer shows the device status bar for any other value of BorderStyle.
    • When you deploy your application for iOS, the visibility of the device status bar depends on the value of BorderStyle.
    • When you deploy your application for Android, you must configure the theme key in the Version Info page in order to specify whether your Android app is to use fullscreen or include the title bar.

Mobile Designer Toolbar

Toolbar for iOS Design-time Devices: MobileToolbarWiOSSelector3.png
Toolbar for Android Design-time Devices: FireMonkeyMobileAndroidNo2.png

Button and Icon Description



Changes the device rotation to the next one available for the current design-time device. Design-time devices rotate counter-clockwise.

Toggle Background


Shows or hides the background image of the current design-time device.

Design Device Selector

Design Device Selector for iOS
Design Device Selector for Android

Selects the working design-time device. You can manage the available design-time devices from the Device Manager. Default design-time devices are as follows:

  • iPhone. Design-time device featuring the iPhone 4 device, which has the same form factor as older iPhones.
  • iPhone 5.
  • iPad.
  • Google Nexus 4.
  • Google Nexus 7.
  • Goggle Nexus 10.
  • Samsung Galaxy S2.
  • Samsung Galaxy S4.
  • 2.7" QVGA Android Phone (240dp x 320dp).
  • 3.2" QVGA Android Phone (320dp x 480dp).
  • 3.3" QVGA Android Phone (240dp x 400dp).
  • 3.4" QVGA Android Phone (240dp x 432dp).
  • 5.1" QVGA Android Phone (480dp x 800dp).
  • 5.4" QVGA Android Phone (480dp x 854dp).
  • 7.0" QVGA Android Tablet (600dp x 1024dp).
  • 10.1" QVGA Android Tablet (800dp x 1280dp).
  • Custom Device. Design-time device that uses a generic device background and does not have a fixed width or height. You can modify the dimensions of the custom device as you wish, and see how your form might look on different form factors.

iOS Style Version Selector


See also Using iOS 7.

  • For iOS design-time devices, selects the iOS style version to be used at design time.
The iOS Style Version Selector:
  • Allows you to toggle the styles used in the Form Designer between iOS 6 and iOS 7 (at design time).
  • Has no impact on what is shown at run time:
    • The iOS style version is detected automatically at run time, and the appropriate related style is used.
    • For example, the iOS 7 styles are automatically used at run time if the target device is using iOS 7.
  • For Android design-time devices, the Version Selector field is dimmed and disabled:

Context Menu

When you right-click a form in the Mobile Designer, the context menu is displayed.

Item Description

Items Editor

(certain components)

Opens the Items Designer with focus on the selected component. With the Items Designer, you can add items to the selected parent item.

Add Item

(certain components)

Allows you to add an item to the selected component on the form. For example, if you add a TEdit control to a FireMonkey mobile form, you can right-click the TEdit control, select Add Item, and select an embedded glyph from the dropdown list. For example, you can select TPasswordEditButton or TClearEditButton.


Select from the following editing subcommands, which apply to the Mobile Designer contents:

  • Undo
  • Cut
  • Copy
  • Paste
  • Delete
  • Select All


Controls the front/back layers of the selected control. Choose from the following subcommands:

LiveBindings Wizard

(only if enabled in Tools > Options > LiveBindings)

Opens the LiveBindings Wizard.

Bind Visually...

Opens the LiveBindings Designer.


Sets the alignment and size of the selected control. Choose from the following subcommands:

Revert to Inherited 

Resets the properties, methods, and events of the selected control to the values of the base class control.

If a form inherits design features and properties from another form, you can choose Revert To Inherited from the context menu to restore the form to its original state. For example, if a form inherits a certain button placement from another form and you then move the button, Revert To Inherited returns the button to its original position.

Tab Order

Invokes the Edit Tab Order dialog box.

Creation Order

(for nonvisual components)

Opens the Creation Order dialog box.

Add to Repository

Opens the Add to Repository dialog box.

View as Text

Opens the current form file as text in the Code Editor window. Alt+F12 performs the same task.

To return to the Form Designer, right-click the Code Editor and click View as Form on the context menu (or press Alt+F12).

Text FMX

Saves the form file (.fmx) either in text form (enabled) or in binary form (disabled).

See Also