ConstraintLayout and why you should be using it

ConstraintLayout is the latest and greatest addition to the Android Support Library and it adds some much needed features to Android Studio. When designing layouts for mobile apps, it can get pretty messy surprisingly fast. Achieving well-designed layouts that are adaptable and conform to the Material Design guidelines is a challenge with just LinearLayouts and RelativeLayouts. Enter ConstraintLayout, the solution to (and also the cause of some) your layout woes!

Setting up for ConstraintLayout

To get the ball rolling, we need to add the dependency for ConstraintLayout to the app-level build.gradle file, as well as downloading it via the SDK manager (you can find it under the Support Repository in SDK Tools. Once you sync and build your project you’ll be good to go and start using constraints.

compile ''

The Advantages

Comparing ConstraintLayout to it’s other ViewGroups LinearLayout and RelativeLayout, it is more closely related to the Relative way of layouts. Each View must has at least 1 horizontal and 1 vertical constraint in order for it to be laid-out correctly. The biggest different you’ll notice when using ConstraintLayout is how flat the View Hierarchy is! It is now much easier to lay out your views where you want them, and the Design view in Android Studio has received some serious upgrades. If you’ve ever used XCode, the constraints concept is similar to what is used in XCode. Using the Hierarchy Viewer tool, we can see JUST how flat the view hierarchy is!

ConstraintLayout View Hierarchy
That’s a flat hierarchy

We’re told that flatter is better, so that when an expensive call to findViewById is made, it doesn’t need to go as deep as it would with a mixture of Linear and RelativeLayouts. And in general, I’ve found it to be easier to navigate, manage and visualize. The next screenshot is from a Udacity Android training course I’m currently doing. Using the tools option in the layout xml, it’s possible to add test data to layouts. This data won’t show up in the real app, and is a better approach than adding placeholder text which could end up being displayed to your users. On the right is the ConstraintLayout “blueprint” for the layout, which is entirely flat! There are no ViewGroups used here at all, just pure constraints on each item. You can probably picture LinearLayouts being used for alignment of many items, but ConstraintLayout eliminates all of this extra overhead.

ConstraintLayout Visualized
ConstraintLayout Visualized


Wrapping up

ConstraintLayout looks set to change how Android screens are created in the future. Although the number of constraints can increase to a large amount on each view, I think the visualisation of these makes it better to use compared to it’s counterparts. The rate of the updates to the library is also something positive to note. Since it’s 1.0 release just a few weeks ago, the library has already received 2 updates. There’s also a tool for converting existing layouts, however it’s not the best feature (yet!) It never quite gets everything covered, but I suppose it can be a good place to start.