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:

1. The space is occupied by elements with the fixed and wrap_content size values.
2. 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.

Size constraints

Both match_parent and wrap_content size types support optional size constraints using min_size and max_size properties:

• min_size: Sets the minimum size of an element. The element will never be smaller than this value.
• max_size: Sets the maximum size of an element. The element will never be larger than this value.

These constraints are useful for ensuring elements maintain reasonable sizes while still being responsive to their content or parent container.

{
  "type": "container",
  "orientation": "vertical",
  "items": [
    {
      "type": "text",
      "text": "This text has constrained match_parent width",
      "width": {
        "type": "match_parent",
        "min_size": {
          "value": 100,
          "unit": "dp"
        },
        "max_size": {
          "value": 300,
          "unit": "dp"
        }
      }
    }
  ]
}

{
  "type": "text",
  "text": "This text has constrained wrap_content height",
  "height": {
    "type": "wrap_content",
    "min_size": {
      "value": 50,
      "unit": "dp"
    },
    "max_size": {
      "value": 200,
      "unit": "dp"
    }
  }
}

Size measurement units

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.

Getting Element Sizes with Layout Provider

Layout provider allows you to capture the actual rendered size of an element and store it in variables. This is particularly useful for creating responsive layouts where one element's dimensions need to depend on another element's actual size.

How It Works

When you specify size values like wrap_content or match_parent, the final rendered size is calculated at runtime. Layout provider gives you access to these calculated dimensions by automatically updating specified variables with the element's width and height after layout.

The process works as follows:

1. Declare variables to store the element's dimensions
2. Add layout_provider to the element with variable names
3. After the element is laid out, the variables are automatically updated with its actual size
4. Use these variables in expressions for other elements' dimensions

Parameters

The layout_provider property accepts an object with two optional parameters:

• width_variable_name: Name of the variable that will store the element's width (in dp)
• height_variable_name: Name of the variable that will store the element's height (in dp)

You can specify one or both parameters depending on your needs.

Size Calculation

The size stored in variables represents the element's content area:

• Includes: The element's width and height as rendered, including paddings and borders
• Excludes: Margins are not included in the calculated size

Responsive Layout Example

A common use case is creating elements whose size depends on other elements. In this example, we create three blocks where each subsequent block's dimensions depend on the previous ones:

Best Practices

1. Initialize variables: Always declare variables with initial values (typically 0) before using them with layout_provider
2. Avoid circular dependencies: Don't create situations where element A's size depends on element B, and element B's size depends on element A
3. Use appropriate types: Declare variables as integer type for dimension values

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