App Studio offers extensive customization options in terms of app layout using its different container controls and styling options for each of the controls
Customized page layout can be easily created using Container Layout control.
The positioning of our controls within a page or container can be accomplished using the Alignment & Layout options.
Page and Container controls can dictate the position of controls within them by using the direction (Vertical/Horizontal) and Alignment attributes in the Layout section. By default, controls fit themselves in one line. If the "Allow wrapping" property is set, the controls wrap themselves to multiple lines if needed.
"Allow wrapping" property when enabled, gets applied when the controls inside the container cannot fit in a line.
Controls within containers can override the parent alignment by using their own alignment option. To default to Parent's alignment, toggle the selected alignment icons to switch off the specific alignment.
Tip - Layout & Positioning
If you want a group of controls to have a specific positioning, place them inside a container and configure the container's layout and alignment.
Controls are automatically sized by default. Auto allows the control to take the size of the content within it. For example, If a button control's width and height is set to 'Auto', the size of the button grows/shrinks based on the text in the button.
Specific height and width can also be set. Min Width/Height and Max Width/Height are available under more (...) in the size section.
The units of measurement are %, px (pixels), and em (relative to the font-size of the element). For example, 3em means 3 times the size of the current font).
Tip - Choosing units of measurment
Units of measurement can be chosen either by selecting from the units dropdown or by typing in the units directly using keyboard and press enter. For example, a 50 % width can be set by simply typing 50%.
If no units of measurement are provided, the system defaults to pixels (px).
You can change the way text appears in your app by adjusting the Font Family, Font Size, Font Color, and Font Style (Bold, Italic, Underline) attributes.
The border section has three properties:
- Border Thickness
- Border Color
- Corner Radius.
Pixels is the unit of measurement for these attributes.
Tip - Circular Buttons using Corner Radius
Circular buttons can be made by modifying the Corner Radius property.
Controls and containers can be spaced out using Margins and Paddings.
Margins provide spacing around the controls.
Paddings provide spacing between the control and the content within it.
Container controls have Margins and Paddings while most other controls only have the Margin section available in them.
Both the Margin and Padding section have the ability to unlink Top/Bottom and Left/Right values to set them independently.
To get you started quickly, there are some sample layout apps that can be downloaded and used. Each of the samples is downloadable and can imported as a starting point for a new app.
Updated 24 days ago