Welcome, Guest Login

Support Center

Stack Layout

Last Updated: Jan 16, 2019 09:00PM EST


Version: 4.00

A very powerful Layout for placing Blocks one after another. As you stack Blocks you can decide which Blocks extend to fill up empty space, which Blocks are fixed height etc..


Drag this block into your app and then you can edit it's settings by right clicking on the block with your mouse.

Version: 4.0

The Stack layout is a very powerful Layout for ordering Blocks one after another. As you stack Blocks you can decide what blocks will have fixed heights, what Blocks will change height based on content, what Blocks will fill empty space, etc…


  • Drag & Drop the Blocks to top of the Stack Layout.
  • Select the Unit for each Block so they fill up empty space or have specific sizes.
  • Right Click to access additional Settings, including Deleting a Block.

how to add blocks to linear layout

In the Stack Layout settings, the Length and Length Unit fields refer to the height of a Block contained in the Layout. View usage examples


The Stack Layout allows you to display a sequence of Blocks, stacked vertically, with a variety of ways to specify relative or absolute heights of the individual Blocks. You can add any number of Blocks to the Stack Layout and control the height of each Block independently. The Stack Layout can take up the entire height of the device or just a section of it.

With the Stack Layout there are 4 different ways of specifying length (Length Units). These are Fixed, Percentage, Flexible and Wrap Content. The heights of Blocks in the Stack Layout are determined in the following order:

  • Fixed and Percentage areas are calculated out first.

  • Then Wrap Content, and then the remainder of the height is split among the Blocks that have Flexible selected as their Length Unit.

  • The Blocks on Top are displayed first. If you stack too many Blocks only the Blocks which fit within the size of your Stack Layout will be showing in your View.

Fixed: As the name implies, the number given for Length will be used for the number of pixels in height of the Block. The total number of Pixels available is defined by the device screen size. If you enter a fixed number which is too large, the rule above will apply.

Percentage: The height of the Block is calculated as a percentage of the height of the Stack Layout. If the Layout fills up the entire screen then percentage of the layout equals percentage of the screen.

For example, if the Stack Layout’s height is set to be 200px, a Length of 10% would cause the Block to be 20px. If the height of the Stack Layout is not know to the builder, the Block would be 10% of the height of the Layout at runtime.

Flexible: The height of the Block is determined dynamically by dividing the remaining height of the Stack Layout among all Blocks with Flex Remainder set as their Length Units after all other Blocks’ heights have been determined. The Length value will determine the specific Block’s effective ratio or weight relative to other Flex Remainder Blocks. If there is no more space remaining in the Layout, then any Blocks using Flex Remainder will not be displayed.

Wrap Content: The height of the Block is determined dynamically based on its contents. For example, the height of a Text Block would vary depending on the number of lines of text it contains. Since the height is being determined dynamically, the value of the Length field is ignored. Not all Blocks can use Flex Content. Currently the HTML Block, Text Block, and any Ad Blocks are supported.


  • If total height of all Blocks exceeds the height of the Stack Layout out then any Blocks that do not fit in the Layout will not be displayed. The Stack Layout will not scroll to display Blocks that are out of bounds. The Blocks on Top will be displayed first until the length reaches the length of your Stack Layout. The Blocks which don't fit will not be showing you on your screen.

  • If a “Length” value is not entered, a default value of 10 will be used.

Back to top


Example 1:
You want to build a classic app with a navigation bar at the bottom and a title on top. - You will need 3 blocks: a title bar at the top (Block A), a block for the middle with your content (Block B) and a navigation block for the bottom (Block C). - Drag Block A to the top of the Stack Layout. Drag Block B to the middle of the Stack Layout; this will make Block B Flexible. Drag Block C to the bottom of Block B.

The following are a few examples of usage of the Flexible Length Unit.
Let’s assume the height of the Stack Layout is 200px.

Example 2:
You want to have a Block fill up the whole layout.

  • In that case you would use one Block with a Flexible Length of 1

Example 3:
You want to have one Block take up ¼ of the screen and a second Block take up ¾ of the screen.

  • In that case, you would have Block A with a Flexible Length of 1, and Block B set with a Flexible Length of 3.

Example 4:
You want to center a Block vertically on the Layout.

  • You will need three Blocks: Block A and Block B, the top and bottom blocks respectively, are Flexible Blocks with a Length of 1.
  • Block M, the middle block can be any Length type. The order of the blocks will be Block A first, then Block M in the middle, and Block B last. Since Blocks A and B will evenly distribute the remaining height between them, this will cause Block M to be centered vertically.


Blocks The number of blocks in the layout.
Block The block used at this point in the layout.
Length The value for the length of this block. What this actually means is dependent on the *Length Unit* selected.
Length Unit Determines the behavior of the block in the layout. Fixed means that *Length* will represent points on the screen. Percentage means percentage of the parent layout, or the window of the app if there is no parent layout. Flexible means this block will take up the remainder of the space left in the layout, split amongst all the Flexible blocks. Wrap Content causes the block to adjust it's size to its content.
Menu Length And Setting Bring up property widget to set the length of each block
Menu Delete Or Remove Block Delete block if it's not my block. Remove block if it's My Block.
Menu Rename Block Rename / Create My Block
Menu Swap Block Swap block to other My Block.


Before Draw

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