ConstraintLayout — what it is, constraints and Flat Hierarchy

What is ConstraintLayout?

ConstraintLayout is a ViewGroup from the AndroidX ConstraintLayout library, designed for creating flexible and performant interfaces through declarative constraints. Unlike LinearLayout, which arranges elements in a line, or RelativeLayout, which positions elements relative to neighbors, ConstraintLayout allows each element to be anchored relative to any other elements and the parent simultaneously.

The library was announced at Google I/O 2016 as a solution for speeding up the rendering of complex screens. The key problem ConstraintLayout solves is layout nesting. Each nested ViewGroup adds at least two measure passes and one layout pass. A screen with 4 nesting levels performs 8 measure passes; ConstraintLayout with the same functionality performs only 2 passes. According to Google (Android Performance Blog, 2017), replacing three nested LinearLayouts with one ConstraintLayout reduces onMeasure time by 40%.

The current version ConstraintLayout 2.1.4 works stably on Android 2.3+ (API 9) through AndroidX. Version 2.0 introduced circular positioning, Flow (automatic element wrapping), and MotionLayout support. ConstraintLayout is essential for understanding modern Android development — it is used in Jetpack Compose as the basic concept of modifiers, in Android Studio default templates, and in Material Design 3.

How Flat Hierarchy Works

ConstraintLayout's flat hierarchy means that all child Views are at the same nesting level. Instead of placing element A in a LinearLayout, and the LinearLayout in a RelativeLayout, all elements are bound directly to the parent ConstraintLayout or to each other through attributes. This provides: lower memory consumption (each ViewGroup is an object in the Java heap), faster layout pass (fewer recursive calls), and more predictable behavior when screen sizes change.

Constraint System: Bindings, Bias and Margin

A constraint is a connection between the edge of one View (or its center) and the edge of another View or the parent. Each View can have up to 8 constraints: left, top, right, bottom, start, end, baseline, and center. At minimum, two perpendicular constraints are enough for positioning (e.g., top + left).

Attribute format: app:layout_constraint[Source]_to[Target]Of="[id]" — where Source is the bound edge (Left, Right, Top, Bottom, Start, End, Baseline), and Target is the target edge. Example: app:layout_constraintTop_toBottomOf="@+id/header" means "the top edge of the current element is bound to the bottom edge of the header element". To bind to the parent, the id parent is used.

Bias is a parameter that works when opposite constraints are present (left + right or top + bottom). Values range from 0 to 1: 0 — pressed to the left/top edge, 0.5 — centered, 1 — to the right/bottom edge. Attributes: layout_constraintHorizontal_bias (0.0–1.0) and layout_constraintVertical_bias. Margins are set with standard android:layout_margin*, but constraints and margins work independently: margin is an offset from the constraint, not from the neighboring View.

Percentage Positioning

Starting with ConstraintLayout 1.1+, support for percentage-based sizing was added through layout_constraintWidth_percent and layout_constraintHeight_percent. A value of 0.3 means 30% of the parent's width/height. Combined with bias, this allows creating adaptive layouts without programming.

Chains and Guidelines

A Chain is a group of two or more Views connected by bidirectional constraints (A is bound to B, B is bound to A). Chains automatically distribute space between elements according to one of the modes: spread (evenly, accounting for margins), spread_inside (evenly, outer elements without edge margins), packed (elements pressed together with a common bias). The mode is set via the app:layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle attribute.

A Guideline is an auxiliary View, invisible at runtime, that defines a line for binding. A Guideline can be horizontal or vertical, positioned in dp, percentages (app:layout_constraintGuide_percent), or with an offset from the edge (app:layout_constraintGuide_begin/end). Guidelines are indispensable for adaptive layouts — for example, for dividing the screen into two equal halves regardless of device size.

According to Google I/O 2017, chains with spread_inside are 15–20% more performant than nested LinearLayouts with weight, because they avoid the double measure pass needed for weight calculation.

Barrier, Group and Virtual Helpers

A Barrier is a virtual View that dynamically adjusts its position based on the size of a group of elements. Unlike a Guideline with a fixed position, a Barrier is "pushed" by the widest element in the group. For example, if you have a title and description with unknown lengths, a Barrier bound to the right edge of the widest text allows you to place an icon right after them. Attributes: app:barrierDirection (left, right, top, bottom, start, end) and app:constraint_referenced_ids (comma-separated list of ids).

Group is a virtual container that manages the visibility of multiple Views simultaneously. Instead of calling setVisibility for each element individually, it is enough to change the visibility of one Group. Group does not affect positioning — only visibility. Flow is a virtual helper for creating "flowing" layouts: elements automatically wrap to a new row/column when space runs out, like text in a paragraph. Flow supports wrapMode: none, chain, and aligned.

These tools (Barrier, Group, Flow, Guideline) are called virtual helpers because they are not Views in the classic sense — they do not take up space in the hierarchy and do not participate in focus or touch events. Their purpose is to simplify the maintenance of complex layouts without adding nested containers.

Examples: XML and Kotlin

Example 1: Basic form with constraints

A simple login form with an email field, a password field, and a button. All elements are bound to parent, except the button — it is below the password field. A flat hierarchy is used — all three elements are on the same level.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginHorizontal="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/email_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="16dp" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/password_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginHorizontal="16dp"
        android:text="Sign in" />

</androidx.constraintlayout.widget.ConstraintLayout>

All elements have a width of 0dp (match_constraint), meaning they stretch from the start to end constraint accounting for horizontal margins. This is equivalent to match_parent with margins, but without nesting.

Example 2: Chain with spread_inside

Three buttons evenly distributed horizontally with edge margins. The spread_inside chain places the outer buttons at the edges and the middle one centered between them.

<Button
    android:id="@+id/btn_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_center"
    android:text="Left" />

<Button
    android:id="@+id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_left"
    app:layout_constraintRight_toLeftOf="@+id/btn_right"
    android:text="Center" />

<Button
    android:id="@+id/btn_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_center"
    app:layout_constraintRight_toRightOf="parent"
    android:text="Right" />

The chain is created automatically when elements have bidirectional constraints. The spread_inside mode is set on any element of the chain via app:layout_constraintHorizontal_chainStyle="spread_inside". This eliminates the need for a LinearLayout with weightSum and layout_weight.

Example 3: Guideline for a symmetric layout

Creating two equal columns using a vertical Guideline at 50%. The left element is bound to the left parent and its right edge to the guideline; the right element is bound with its left edge to the guideline and to the right parent.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_midpoint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/left_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/gl_midpoint"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

<TextView
    android:id="@+id/right_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/gl_midpoint"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

A Guideline with a percentage of 0.5 automatically adapts to the screen width. On both tablet and phone, the column ratio remains 50/50. For left/right nomenclature, use start/end attributes for RTL compatibility.

Comparison: ConstraintLayout vs LinearLayout vs RelativeLayout

Comparison table of three main ViewGroups for Android development: ConstraintLayout, LinearLayout, and RelativeLayout. Criteria: flexibility, performance, code complexity, and use cases.

According to Android Vitals (Google, 2025), apps using ConstraintLayout as their primary container show on average 18% fewer jank frames when rendering complex screens compared to apps using nested LinearLayouts. At IT Sectr, we switched to ConstraintLayout as the standard for all XML layouts in 2018 — this reduced the average screen hierarchy depth from 4.2 to 1.8 levels and sped up the development of new forms by 25%.