Welcome, Guest Login

Support Center

Retired: Create Adaptive UI

Last Updated: May 19, 2017 04:17PM EDT

Updated article: 

Dynamic Screen Sizes

It is really useful to develop apps to automatically adapt to the multiple screen sizes & form factors.
To create an Adaptive UI, you need the actual size of the device screen the app runs on.

That information is accessible in System Value.

The following System Values allow you to use layout in wide variety of devices.
- Device Landscape Height
- Device Landscape Width
- Device Portrait Height
- Device Portrait Width

You can access them anywhere you see the pencil image

The values when brought into the builder will look like this:

In this example we want an image to stretch out the full width of the Portrait Device so we use [[sys:devicePortraitWidth]] as a value in "Size & Position" to define the Width of the image.

You can also use formatters on System Values. Add Divide, Multiply and Subtract.

Line up your mouse before the end brackets "]]" to add your formatter.

So now you can add your formatter and it will look like this:

In this example we want a block to always align a constant value from the bottom we would use a formatter like this:

[[sys:devicePortraitHeight:sub 60]]

This would layout the value 60 pixels no matter what the height of the device.

In this example we have buttons that layout relative to the left edge constraint. We use 2 formatters, Subtract and Divide. We use the pipe symbol to separate the additional formatters "|". The calculation looks like this:
[[sys:devicePortraitWidth:div 2|add 13]]

This lays out the button always relative to the device width.

In this example we have 4 navigation buttons. We set the following System values for each button width to take up a 1/4 of the width no matter what the width of the device is. We use the Formatters, Divide and Multiply. We use the pipe symbol to separate the additional formatters "|".

All icons have Width of:
 [[sys:devicePortraitWidth:div 4]]
Edge Constraint: From Left edge
Home Icon:    0
Video Icon:    [[sys:devicePortraitWidth:div 4]]
Clients Icon:  [[sys:devicePortraitWidth:div 4|mul 2]]
News Icon:     [[sys:devicePortraitWidth:div 4|mul 3]]

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found