Short guide to sizing elements for different screen sizes and resolutions
For the app developer today, deciding what mobile device to design for is challenging. On Android alone, there are thousands of different devices that are in popular use today. On iOS, there are still 8 different iPhone sizes and 4 different iPad sizes.
By sizing your components optimally, you can support as many screen sizes and resolutions appropriately across platforms in a single project.
The following properties are available to all visible components in the
Sets the size as a percent of the Screen
Sets the size in pixels. The screen size of the Phone Previewer in the Designer is by default set to 500 px by 280 px but that may not reflect the size of your phone
Sizes an element to the contents
Sizes an element to fill the Screen, Row or Column that it is within
Relative size is your best friend for almost all elements since it will auto-scale elements to the screen. In some cases, where there are fixed dimensions
Image or Button (with Image)
Labels and Text Input
Row and Column
All Other Components
Image with fixed dimensions and resolutions can be especially difficult to size. We recommend a simple approach that should work in most cases.
Upload or reference images with a minimum resolution (this varies by image size and device)
Set the height and width in
Set the resize mode property to either
contain (see below). This will autosize your image even if the dimensions of the image change
To ensure that the text is not cut off on the screen, in most cases we recommend using
Fit contents to set the height of Labels and Text Inputs
Despite the beauty of relative size, there are a few cases where setting elements in absolute size is recommended or required
Since a Scrollable Screen has a height that is greater than the size of the Screen, the height of the elements must be set in
You can see an example of a Scrollable Screen in the Design Templates