App Designer - Responsive Layout

Tweet Like

Responsive layout

App Designer is 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. When multiple columns are on your workspace layout, a “Guidelines” button can be pressed to display and hide the column dividers between each column.  In the upper left corner of App Designer, there is a “View” panel provides the controls to change the form factor of the workspace to a landscape or portrait view as well as a phone, and tablet size.

Cramp

When an application’s window size is reduced to a phone form factor or similar, there tends to be a collapse of labels on fields as well as a cropping effect on all of the UI elements.  A responsive design would resolve the visual implications experienced when applications are viewed on small form factors.  The ideal solution would be to have a column wrap one after another under each other to provide the needed space for each content’s container.

one wrap point

Wrap points are instruments for telling the layout when to shift the adjacent columns below one another instead of cramping. Wrap points can be dragged to any position on the “wrap point” bar.  As the layout’s size becomes smaller than a wrap point, the columns will begin to transition below the adjacent one. 

Two wrap points

For example, if a wrap point is placed on the layout which contains multiple columns, the first column is preserved on it’s own row while the others are linked together on a separate row. If another wrap point was inserted in this scenario, the second column would collapse to its own row similar to the first column while the remaining columns occupy rows together. Wrap points are effective when you want to distribute your content evenly across form factors.

Creating Wrap Points on the Workspace Layout

There are two (2) ways to create wrap points.

  1. Click on the “Insert Wrap Point” button on the left of the layout
    1. This will add a wrap point randomly on the “wrap point” bar.

 OR

  1. Click on the “wrap point” bar.
    1. This will add a wrap point to the location clicked on the bar.
Deleting wrap point

Deleting Wrap Points on the Workspace Layout

  1. Right Click the wrap point to reveal its context menu.
  2. Click Delete

OR

  1. Drag the wrap point above the “wrap point” bar.

Get started with the Intel XDK


Download Now