Comment on page
🖼️ Intro to Sizing
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
Widthproperties. In these definitions, a parent component is a Screen, Row or Column that contains the component.
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 with fixed dimensions and resolutions can be especially difficult to size. We recommend a simple approach that should work in most cases.
- 1.Upload or reference images with a minimum resolution (this varies by image size and device)
- 2.Set the height and width in
- 3.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 contentsto 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 to
fit contents.You cannot use relative sizing or 'fill container' for components in a scrollable Screen or Column.