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

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.

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.

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.

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

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

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

Software Engineer | GDE Firebase | YouTuber — All Techies