Visual element design

Element visibility

Elements can have different visibility states that affect their display and behavior:

• visible — element is visible and takes up space in the layout;
• invisible — element is invisible but continues to take up space in the layout;
• gone — element is completely hidden and does not take up space in the layout.

Visibility inheritance

When nesting elements in containers, a visibility inheritance system applies:

• Elements inside a container inherit the visibility of the parent container
• The actual visibility of an element is determined as the minimum visibility between its own visibility and the visibility of the parent container
• Visibility priority: gone > invisible > visible

This means that if a container has invisible or gone visibility, all its child elements will also be invisible, regardless of their own visibility settings.

Transparency

You can set the transparency of an element by specifying the value of the alpha parameter from 0 to 1:

• 0: Completely transparent.
• 0.5: Translucent.
• 1: Opaque.

Background

All visual elements can have a background set in background. Background types:

• linear-gradient: Linear gradient.
• radial-gradient: Radial gradient.
• solid: Solid color.
• image: Image.
• nine-patch-image: Nine patch image.

You can add several different backgrounds superimposed on each other to the array. In this case, the top-level background must be partially translucent, otherwise the lower layers won't be visible.

Border

You can use the border parameter to set the border, the color and width, rounded corners, and a shadow:

1. Add an element, for example, text.
2. Add a border and round the corners using the corner_radius parameter.
3. Add fill.
4. Add an action to perform when tapped to the resulting button.

Learn more

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

DivKit Repository