What’s new in constraint layout 1.1.0

Constraint layout is certainly the best layout available for building a responsive UI — a layout which auto adjust based on screen size. Although constraint layout was capable of doing great work since from version 1.0.0 but there were few things that were missing and it’s good see them in the latest version. Let’s have a look onto them one by one.

Circular Positioning
When a view need to be positioned based on another view with some angle and a distance measured from the center point of both the views. Think of a satellite revolving around planet with some angle and a distance.

A view can be aligned to any angle and radius with respect to its center view.
These are the set of attributes used for view to get aligned
app:layout_constraintCircle — Get aligned with this view
app:layout_constraintCircleAngle — Angle from the aligned view
app:layout_constraintCircleRadius — Distance from the aligned view

<Button
    android:id="@+id/btCenter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Center Button"/>

<Button
    android:id="@+id/btAlign"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Aligned Button"
    app:layout_constraintCircle="@id/btCenter"
    app:layout_constraintCircleAngle="45"
    app:layout_constraintCircleRadius="120dp" />

View at 60 degree from the center view

Barrier
It’s having capability to create guideline at runtime based on the maximum width of the view available on the specified side. That means as width of the view reduce or increase guideline automatically shift to get aligned with the width of the view. Barrier get aligned with the view having maximum width among the group of views with which its being referenced to

End barrier

A barrier can be set to the start, end, top, bottom — here blue box always remain to the right side of the barrier where barrier guideline is calculated based of max width among the gray color box.

<Button
    android:id="@+id/btName"
    android:layout_width="100dp"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btAge"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/btName" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="btName,btAge" />

<Button
    android:id="@+id/btAddress"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/barrier" />

Here btAge is having width of 150dp which is greater than btName with width of 100dp so barrier will set the guideline after 150dp. During runtime if width changes than barrier automatically recalculate guideline and push referenced view further.

Group
Well this is much awaited feature, what this can do is that if multiple views visibility need to set as visible or gone it can do it with an ease. Think of viewgroup containing various views and setting viewgroup visibility gone hide all its child views also. Group is having exactly same feature but it’s not viewgroup instead just require reference ids. A major boost for flat hierarchy layout.

<Button
    android:id="@+id/btCenter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Center Button"
    android:textAllCaps="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btAlign"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Aligned Button"
    android:textAllCaps="false"
    app:layout_constraintCircle="@id/btCenter"
    app:layout_constraintCircleAngle="45"
    app:layout_constraintCircleRadius="120dp" />

<android.support.constraint.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="btAlign,btCenter" />

Placeholder
It’s used to dynamically set content on screen where any view can be set to placeholder just by passing it’s id. If the view exists on same screen as placeholder is than its visibility will automatically be set to gone.

<ImageView
    android:id="@+id/iv_call"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background" />

<android.support.constraint.Placeholder
    android:layout_width="match_parent"
    android:layout_height="100dp"
    app:content="@+id/iv_call"
    app:layout_constraintBottom_toBottomOf="parent" />

In order to set content programmatically use placeholder.setContentId(viewId)

Dimension constraints
It’s often required that view width or height to remain as wrap content instead of match constraint or match parent but unfortunately wrap content override the constraint applied and overlap with the constraint if width or height changes. With version 1.1.0 this issue is resolved by using
app:layout_constrainedWidth=”true”
or
app:layout_constrainedHeight=”true”

What this does is that it imposes constraint and also let view width/ height remain as wrap content

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello this is an example with constraint width"
    app:layout_constrainedWidth="true"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="@+id/guideline_50"/>

The one thing which truly constraint layout was missing is ability to define width and height in terms of percentage. Defining width or height in percentage is much more helpful to make an expressive UI as width or height in dp doesn’t work so well when viewed on mobile and tablet until different dimens are specified. But now width and height can be defined in terms of percentage by using layout_constraintWidth_percent and layout_constraintHeight_percent.

In order to use percentage for width and height the dimension should be match constraint(0dp) and app:layout_constraintWidth_default=”percent or app:layout_constraintHeight_default=”percent” need to set as percent

<TextView
    android:id="@+id/bt"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Hello Width In Percentage"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.5"
    app:layout_constraintLeft_toLeftOf="parent" />

Percentage can be defined in between 0 to 1 where 1 means 100%. Here width is defined as 50% by using 0.5.

There are few more cool features of constraint layout like achieving animation by using constraint set, optimizing layout using constraint optimizer and complex chain support. It’s good to see constraint layout is increasing capability to build a great UI.

Want to know more about constraint layout 2.0 features then tune to the following video