Element location and size

Size

Size types

You can adjust the size of the elements in the card using the width and height parameters of the container element. They have one of the following size values:

match_parent: The default width value, the element adjusts to the block containing it.
wrap_content: The default height value, the element adjusts to its content.
fixed: The fixed size value.

To make the element occupy half the height or be located at the bottom of the container, use match_parent. The algorithm distributes space in the following order:

The space is occupied by elements with the fixed and wrap_content size values.
The remaining space is divided by elements with the match_parent size value. By default, all elements with the match_parent size value divide the space equally or distribute it according to the value of the weight parameter, if specified.

View an interactive example

Size measurement units

Note

The sp measurement unit is used only in Android.

If the fixed type is used, the result depends on the measurement units:

dp (density-independent pixels): A standard size measurement unit that is used by default and doesn't depend on the screen density.
sp (scale-independent pixels): A measurement unit that depends on the text size factor on a phone.

If there is text in the element, specify the height in spto make the block scale together with the text. If the text doesn't fit, use dp.

Element borders

To define the element borders, the paddings and margins parameters of the container element are used:

paddings: The distance from the card content to its borders.
margins: The distance from the card borders to other elements and container borders. It doesn't affect the size of the card itself.

Alignment

The following parameters of the container element are used for horizontal and vertical alignment inside elements:

alignment_horizontal: Horizontal alignment. It can have the left, center, and right values. Inside a horizontally aligned container, you can only align vertically, meaning apply content_alignment_vertical with the left (default), center, or right values.
alignment_vertical: Vertical alignment. It can have the top, center, and bottom values. Inside a vertically aligned container, you can align horizontally, meaning apply content_alignment_horizontal with the top (default), center, or bottom values.

If you specify the alignment inside a container, for example, content_alignment_horizontal, the child elements inherit this parameter. If the values are specified in the child elements, they will be overridden.

View an interactive example

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository