App Designer - Layout


App Designer-Layout

App Designer is a drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row. Most elements have a Label attribute that can be positioned in various locations such as the Top Left.  By default, a single column lays out all of its components vertically left to right, top to bottom.

App Designer-Inserting

Increasing Column Count create to Multiple columns

  1. Drag the “Column” element to the layout over the designated area outlined in the turquoise color.
    1. The turquoise colored area will turn orange when the element being dragged hovers over the appropriate position to be inserted.
      1. For example, if there is only one (1) column in the row, the second column being inserted will then occupy 50% of the space. If there is two (2) columns in a row, the third column being inserted will cause the three columns to occupy 33% of the width.


When multiple columns are located in a row, a column divider will be visible between each column.  The divider can be dragged left or right to adjust the width of the columns that it is situated between.  Column widths are based on a twelve(12)-based CSS grid system. When the divider is moved left or right, the columns width changes based on the allotted size given which will result in a sum equal to twelve(12) for the columns’ combined width in the row.


Columns are easily deleted as well. Once a column is clicked on, a “trash can” icon can be seen next to its name in the breadcrumbs bar. The trash can is a clickable icon that deletes the column from the row.

Get started with the Intel XDK

Download Now

For more complete information about compiler optimizations, see our Optimization Notice.