Adding a Customized View to the View Selector
Go Up to Using FireMonkey Views
You can create and add new views to the View Selector in the Form Designer if the available views do not cover the specifications of your target device.
Contents
Display Specifications for the Available Views
View | File | MinPhysicalSize | MaxPhysicalSize | MinLogicalSize | MaxLogicalSize | PPI |
---|---|---|---|---|---|---|
Windows Desktop |
System.Win.Devices |
|||||
Surface Pro |
System.Win.Devices |
|||||
Android 3.5" Phone |
System.Android.Devices |
(800,500) |
(1000,600) |
(400,250) |
(500,300) |
320 |
Android 4" Phone |
System.Android.Devices |
(1280,800) |
(1360,850) |
(640,400) |
(680,425) |
320 |
Android 5" Phone |
System.Android.Devices |
(1708,960) |
(1920,1200) |
(854,480) |
(960,600) |
320 |
Android 7" Tablet |
System.Android.Devices |
(1708,960) |
(1920,1200) |
(854,480) |
(960,600) |
320 |
Android 10" Tablet |
System.Android.Devices |
(2400,1500) |
(2560,1600) |
(1200,750) |
(1280,800) |
320 |
Google Glass |
System.Android.Devices |
(640,360) |
(640,360) |
(427,240) |
(427,240) |
30 |
Sony SmartWatch 3 |
System.Android.Devices |
(320,320) |
(240,240) |
283 | ||
Motorola Moto 360 |
System.Android.Devices |
(320,290) |
(240,218) |
205 | ||
iPhone 3.5" |
System.iOS.Devices |
(480,320) |
(480,320) |
163 | ||
iPhone 4" |
System.iOS.Devices |
(1136,640) |
(568,320) |
326 | ||
iPhone 4.7" |
System.iOS.Devices |
(1334, 750) |
(667, 375) |
326 | ||
iPhone 5.5" |
System.iOS.Devices |
(2208, 1242) |
(736, 414) |
489 | ||
iPad |
System.iOS.Devices |
(2048,1536) |
(1024,768) |
264 | ||
macOS Desktop |
System.Mac.Devices |
Note: The devices with only the MaxPhysicalSize and MaxLogicalSize are defined with the real exact dimensions.
Adding an Android View for a Specific Device
To create a new view you need to:
The following example shows how to create a view for an Android device with the following display specifications:
- Model = MyPhone
- Diagonal (in) = 4.5
- Resolution = 720 x 1280 pixels
- Pixel density = 326 ppi
- Css pixel ratio = xhdpi (2.0x)
You can find the specifications for a specific device on the manufacturer's website, on the datasheet.
Adding the Device Preset for the New View
To enable the view in the View Selector and customize its form, you need to add the device preset from the Device Manager or from the DevicePresets.xml
file:
- To add the new device preset from the Device Manager, follow the steps to add a device preset.
- Note: If you add a device preset from the Device Manager, you need to go to
C:\Users\<username>\AppData\Roaming\Embarcadero\BDS\22.0
, openDevicePresets.xml
, and copy the automatically generated name written between the<Name></Name>
tags. This name needs to match the name of the view used in the view package.
- To add the new device preset from the
DevicePresets.xml
file, follow the steps below:
- Warning: We recommend to carefully check the modifications on the
DevicePresets.xml
file. Please revise the xml tags to ensure that they are properly cased. Otherwise the designer could not understand them and behave unexpectedly.
- Go to
C:\Users\<username>\AppData\Roaming\Embarcadero\BDS\22.0
. - Note: This is a hidden folder. If you are not able to see it, make active the Show hidden files, folders, and drivers on the Folder Options dialog box in the Windows Control Panel.
- Open the file with a text editor.
- Inside the
<MobileDevices RepositoryVersion="3">
tag, add a newMobileDevice
element as follows: - Notes:
- You need to replace
ARTWORK_PATH
with the correct path to your artwork. - If you want to define a device preset with a non-rectangular shape, use the Mask field.
- You need to replace
- Restart the IDE for the changes to take effect.
<MobileDevice>
<Name>TestView</Name> <!-- Same unique ID used in the creation package if you are registering a new View -->
<Displayname>My Android Phone</Displayname> <!-- Name to show in the Device Manager, View Selector and Multi-Device Preview -->
<DevicePlatform>3</DevicePlatform>
<FormFactor>2</FormFactor>
<UserData>True</UserData>
<Portrait Enabled="True" Width="360" Height="640" Top="61" Left="44" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
<UpsideDown Enabled="True" Width="360" Height="640" Top="68" Left="47" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
<LandscapeLeft Enabled="True" Width="640" Height="360" Top="44" Left="68" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
<LandscapeRight Enabled="True" Width="640" Height="360" Top="47" Left="61" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
</MobileDevice>
For further information, see the DevicePresets.xml
Elements.
After restarting the IDE, the new device preset is displayed in the Device Manager and the Multi-Device Preview.
Create a New Package
- Select File > New > Package - Delphi or C++Builder.
- In the Projects Window, right-click the <project_name.bpl>.
- Select Add New > Unit.
- Add the following code to the unit:
- Delphi:
unit Unit1;
interface
implementation
uses
system.Devices, system.Types, system.SysUtils;
const
ViewName = 'TestView'; // The unique name of the view, it has to be the same name as the one written between <Name></Name> tags of the DevicePreset.xml file.
initialization
TDeviceinfo.AddDevice(TDeviceinfo.TDeviceClass.Phone, ViewName,
TSize.Create(1216, 684), TSize.Create(1216 div 2, 684 div 2), // MinPhysicalSize(max, min), MinLogicalSize(max, min)
TSize.Create(1280, 720), TSize.Create(1280 div 2, 720 div 2), // MaxPhysicalSize(max,min), MaxLogicalSize(max,min)
TOSVersion.TPlatform.pfAndroid, 326); //Select the platform and the pixel density.
finalization
TDeviceinfo.RemoveDevice(ViewName); // To unregister the view after unistalling the package.
end.
- C++:
Add this code to the .cpp file:
#include "Unit1.h"
#include <System.Devices.hpp>
// ---------------------------------------------------------------------------
#pragma package(smart_init)
void initdevice() {
TDeviceInfo::AddDevice(TDeviceInfo::TDeviceClass::Phone, "TestView", // The unique name of the view, it has to be the same name as the one written between <Name></Name> tags of the DevicePreset.xml file.
TSize(1216, 684), TSize(1216 / 2, 684 / 2), TSize(1280, 720),
TSize(1280 / 2, 720 / 2), TOSVersion::TPlatform::pfAndroid, 326);
}
Add this code to the .h file:
void initdevice();
#pragma startup initdevice 42
- Before installing the package close any open project on the Designer.
- In the Projects Window, right-click the <project_name.bpl>.
- Click Install.
- An Information message appears informing you that the package has been installed.
- Restart the IDE for the changes to take effect.
After restarting the IDE, the new device preset is displayed in the Device Manager, Multi-Device Preview as well as in the View Selector.
Using the New View
After adding the device preset, installing the package, and restarting the IDE, the view is available in the View Selector. It appears with the display name defined in the xml file.
In order to use the customized view when you run the multi-device project in the corresponding device, you need to do the following:
- Reference the unit of the view from your project, for example, adding the
.pas
unit to your project.
- Warning: Referencing the unit of the view in your project registers the view even if it is not needed.
When you run the project, an algorithm selects the most appropriate view for the selected device. If the customized view is the most appropriate view for the target device, it launches this view. The system ignores the views that are not compatible with the target platform.
Removing Customized Views
You need the following code to unregister a customized view from the View Selector (added to the package in the Create a New Package step).
const
ViewName = 'TestView';
finalization
TDeviceinfo.RemoveDevice(TestView);
To remove a customized view from the View selector:
- Close all the forms before uninstalling a package containing customized views.
- Go to Component > Install Packages....
- Select the package you want to remove.
- Click Remove.
After removing the package, if you do not need that device preset anymore, you may delete the device preset by deleting the device preset from the Device Manager or by deleting its related information from the DevicePresets.xml
as added in the previous steps.
- Note: You might need to restart the IDE for the changes to take effect.