Layout and Styling

App Studio offers extensive customization options in terms of app layout using its different container controls and styling options for each of the controls

Position Your 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.

When enabled, the Allow wrapping property gets applied if 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.

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.

Resizing Your Controls

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 are 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).

Choosing units of measurement

Units of measurement can be chosen either by selecting from the units dropdown or by typing in the units directly using the 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).

Customize the Font

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.

Tip:

You can switch between RGB, HEX, and HSL color by clicking on the arrows next to the color value.

Working With Borders

The border section has three properties:

• Border Thickness
• Border Color
• Corner Radius.

Pixels are the unit of measurement for these attributes.

Circular Buttons using Corner Radius

Circular buttons can be made by modifying the Corner Radius property.

Spacing Out Controls

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.

Changing the Background Color

You can change the background color of your controls using one of the three color models:

• RGB
• HEX

• HSL

  To do so, click on the arrows next to the color values.