Introducing ConstraintLayout: Benefits, Usage, and Performance Comparison

0. Why Introduce ConstraintLayout

You may have encountered the following problems in previous UI development:

RelativeLayout (RL) has a high performance cost, yet it is hard to avoid using it.

To achieve proportional layouts you need the layout_weight attribute, which forces you to use LinearLayout (LL) or TableLayout (TL). This often means nesting an extra layout level just to use layout_weight .

Higher‑level layout requirements such as fixed aspect‑ratio layouts are not well supported by existing layouts and may require runtime Java calculations.

Or you simply want to try the new Android‑official layout and see its new features.

1. Preparation

1.1 Ensure that the ConstraintLayout support library has been downloaded in SDK Tools.

1.2 Add the Gradle dependency:

compile 'com.android.support.constraint:constraint-layout:1.0.2'

1.3 Add the XML namespace declaration at the top of any layout that uses ConstraintLayout:

xmlns:app="http://schemas.android.com/apk/res-auto"

1.4 If the IDE can autocomplete ConstraintLayout and its attributes, the library is correctly linked.

2. Step‑by‑Step Hands‑On

Goal: replace a layout that was built with RL/LL with an equivalent ConstraintLayout (CL). Android Studio 2.3 can auto‑convert, but it is recommended to try it manually first.

2.1 Relative Layout Example

RL scenario: place View B to the right of View A with a 50dp margin.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_toRightOf="@id/tv_a"
        android:layout_marginLeft="50dp"
        android:background="@color/colorAccent"/>
</RelativeLayout>

2.1 ConstraintLayout Implementation

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="50dp"
        app:layout_constraintLeft_toRightOf="@id/tv_a"
        android:background="@color/colorAccent"/>
</android.support.constraint.ConstraintLayout>

The CL attributes directly correspond to the RL ones; after a short familiarisation the conversion is straightforward.

CL Attribute

RL Attribute

layout_constraintLeft_toLeftOf

layout_alignLeft

layout_constraintLeft_toRightOf

layout_toRightOf

layout_constraintRight_toLeftOf

layout_toLeftOf

layout_constraintRight_toRightOf

layout_alignRight

layout_constraintTop_toTopOf

layout_alignTop

layout_constraintTop_toBottomOf

layout_below

layout_constraintBottom_toTopOf

layout_above

layout_constraintBottom_toBottomOf

layout_alignBottom

layout_constraintBaseline_toBaselineOf

layout_alignBaseline

layout_constraintStart_toEndOf

layout_toEndOf (API 17)

layout_constraintStart_toStartOf

layout_alignStart (API 17)

layout_constraintEnd_toStartOf

layout_toStartOf (API 17)

layout_constraintEnd_toEndOf

layout_alignEnd (API 17)

2.2 Proportional Spacing (layout_weight)

Using layout_weight in a TableLayout to achieve a 3:7 left/right margin ratio:

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:shrinkColumns="0,2">

    <TableRow>
        <View
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"/>
        <TextView
            android:id="@+id/tv_a"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/colorPrimary"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.7"/>
    </TableRow>
</TableLayout>

ConstraintLayout achieves the same effect with a single view and the bias attributes:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.3"/>
</android.support.constraint.ConstraintLayout>

Both layout_constraintHorizontal_bias and layout_constraintVertical_bias allow intuitive proportional spacing.

2.3 Fixed Aspect Ratio

Before CL you had to calculate dimensions in Java. With CL you can use layout_constraintDimensionRatio in a single XML line.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- "H,4:3" means height is derived from a 4:3 width‑height ratio -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
        app:layout_constraintDimensionRatio="H,4:3"
        android:background="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

In CL, 0dp works as MATCH_CONSTRAINT . It can be combined with chains, weights, or margins.

2.4 GoneMargin

When a view’s visibility is gone , the layout_goneMargin* attributes let the sibling keep a predefined distance.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:text="A"
        android:textSize="30sp"/>

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="50dp"
        app:layout_goneMarginLeft="100dp"
        app:layout_constraintLeft_toRightOf="@id/tv_a"
        android:background="@color/colorAccent"
        android:text="B"
        android:textSize="30sp"/>
</android.support.constraint.ConstraintLayout>

2.5 Chains

Chains are a new way for views to relate to each other in a single direction. They simplify complex relative layouts.

2.5.1 Creating a Chain

Three views (A, B, C) form a horizontal chain when each view’s left/right constraints reference the neighbour:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="50dp"
        app:layout_constraintRight_toLeftOf="@+id/tv_b"/>

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintLeft_toRightOf="@id/tv_a"
        app:layout_constraintRight_toLeftOf="@+id/tv_c"/>

    <TextView
        android:id="@+id/tv_c"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="50dp"
        app:layout_constraintLeft_toRightOf="@id/tv_b"/>
</android.support.constraint.ConstraintLayout>

In the Design view a chain appears as a dotted line connecting the views.

2.5.2 Chain Styles

Head of the chain (the leftmost view for horizontal, topmost for vertical) can set layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle to one of three values:

spread

spread_inside

packed

Combining packed with bias attributes yields a “packed with bias” style. Adding layout_constraintHorizontal_weight (or vertical) creates a weighted chain.

Chain Style

Setting

Spread Chain

chainStyle="spread"

Spread Inside Chain

chainStyle="spread_inside"

Packed Chain

chainStyle="packed"

Packed Chain with Bias

chainStyle="packed" + bias attributes

Weighted Chain

chainStyle="spread" + layout_constraintHorizontal_weight / layout_constraintVertical_weight + width/height="0dp"

Weighted Chain Example (Horizontal)

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="0.33"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_b"/>

    <TextView
        android:id="@+id/tv_b"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintHorizontal_weight="0.33"
        app:layout_constraintLeft_toRightOf="@id/tv_a"
        app:layout_constraintRight_toLeftOf="@+id/tv_c"/>

    <TextView
        android:id="@+id/tv_c"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintHorizontal_weight="0.33"
        app:layout_constraintLeft_toRightOf="@id/tv_b"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Key points for a weighted chain:

The head view sets chainStyle="spread" .

Each view defines layout_constraintHorizontal_weight (or vertical).

All views use 0dp (MATCH_CONSTRAINT) for the dimension in the chain direction.

3. Simple Performance Test

Google claims ConstraintLayout reduces onMeasure/onLayout overhead by about 40 % compared with RelativeLayout.

The author built a 3 × 2 matrix of views using both layouts, each view set to wrap_content with margins, and repeatedly rendered the layout in a ListView while measuring onMeasure/onLayout time via OnFrameMetricsAvailableListener (API 24).

The collected data (shown below) indicate that ConstraintLayout reduces the combined onMeasure/onLayout time by roughly 10 % in this scenario, less than the advertised 40 %.

4. Personal Development Experience

After using ConstraintLayout for a while, the author finds it superior to RelativeLayout, LinearLayout, and TableLayout for proportional and linear layouts, allowing concise XML. For simple relative layouts the performance gain is minimal and the XML readability can be lower than RL. Complex relative layouts may require more XML and a good grasp of chains and constraints. Many developers think ConstraintLayout is meant to replace RL, but the author believes it is a better replacement for TableLayout, while replacing RL would need more powerful chain capabilities.

Nevertheless, the trend is moving toward broader adoption of ConstraintLayout.

References

https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html

https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html

http://blog.csdn.net/zxt0601/article/details/72683379