Margins and sizes

The margins and sizes of controls are defined in the same way. Margins (top/left/bottom/left/right) are used to specify the space between different components, and sizes are specified by the width and height of the control.

Margins

In the figure below, there are three buttons with different margins from top to bottom:

A has margin = 6
B has margin = 3
C has no margins

The resulting space between A and B will then be twice the distance between B and C (C has no margins). Margins do not overlap with each other.

plus 1 mobile app layout 2 — Figure 1: Margins for buttons A, B and C

Dynamic units

Dynamic units (du) are display independent length units that make it possible to specify widths, heights, or margins without having to know anything about which screen the page contents will be displayed on. The framework will make sure that the page contents will look good on any type of screen.

In the example below, if

A has a right margin of 5du
B has a left margin of 4du

then the resulting space between them will be 9du, which is the sum of both margins.

Weight units (we)

Weight units (we) are used to specify how much of the available space a control should use.

In the example below, if the available space is 10we and there are two controls competing over this space and

Control A has 2we
Control B has 8we

then A will get 2/10 and B will get 8/10 of the space.

If both controls specify the same weight:

Control A has 22we
Control B has 22we

then the available space will be distributed equally between them.

If both controls specify the same weight:

Control A has 22we
Control B has 22we

then the available space will be distributed equally between them.

Controls can combine dimensions in we and du to make one control have a fixed size, while a second control will take all available space.

In the example below, the first and third buttons always have a fixed width

Button 1 = 6du
Button 3 = 6du

then the second button (1we) occupies all available space between them independently of the screen size.

match_parent

Instead of giving a control explicit dimensions (by using du for example), it is also possible to specify that a control should use all available space (or a specific fraction of it).

This is accomplished by selecting match_parent for the width or height of a control. This means that the width of the control will match the width of its parents, or at least try to match it.

wrap_content

It is also possible to set a specific size to wrap_content. The control will then try to claim an appropriate size to fit the content, and also margins, if available.

Note: Applications can be viewed on a lot of different devices, from small smart phones to big tablets. Therefore, it is important for an application to be responsive, to dynamically adapt to different screen sizes. Using dynamic units is thus not recommended for specifying control widths, use instead match_parent or weight units for this purpose.