What to expect from ConstraintLayout 2.0

profile picture

Joren Engineer

17 May 2018  ·  5 min read


Another edition of Google I/O has come and gone – so it’s time to recapitulate. We saw impressive things, concerning Google Assistant, AI, machine learning, and more. But in this post, we’ll talk about the new announcements for ConstraintLayout.

Watching Google I/O videos, the talk on ConstraintLayout 2.0 immediately caught our attention. Okay, it’s not Google Assistant calling a hairdresser, but for Android developers, ConstraintLayout can really make a difference in building layouts. So what does the future hold for ConstraintLayout? Let’s find out!

Before we dive into the details, let’s quickly explain ConstraintLayout for the uninitiated.

ConstraintLayout is a ViewGroup that’s designed to help developers create complex user interfaces more easily, while retaining a flat view hierarchy. A flat view hierarchy means less nested layouts, which means improved performance. From the start, ConstraintLayout was designed with the layout editor of Android Studio in mind. It makes adding relations between views (constraints) as easy as connecting some dots!

ConstraintLayout is available as a small, unbundled library that you can use on Android systems starting with API level 9 (Gingerbread). It was first introduced to us at Google I/O 2016, and the latest version (1.1.0) was released only a few weeks ago, with some nice additions like barriers and groups.

With that clear, let’s dive into the newly announced ConstraintLayout 2.0, and why this is something to be excited about.

First up: helpers

Helpers are objects that help the developer specify and build the UI. They aren’t ViewGroups and they aren’t necessarily part of the view hierarchy – helper objects only keep a reference to the views. This means that the flat view hierarchy is maintained. You can add and manipulate helpers in xml or straight from the layout editor. It’s all declarative. Also, views can be referenced by multiple helpers. Essentially, they allow you to tag views and apply specific behavior on them. This way, you can encapsulate and reuse specific behavior.

Up until now, we could choose between two helpers: Guideline and Barrier. But in ConstraintLayout 2.0, the ConstraintHelper class will be exposed to developers, which allows everyone to create their own helpers. Not only will you be able to create your own helpers, you will also be able to manipulate custom helpers from the component tree of the layout editor in Android Studio.

Additionally, various predefined helpers will be added to the library. These helpers are divided into three main categories:

  • Layout manipulation
  • Post-layout manipulation
  • Rendering or decorating

A few examples of new helpers

Virtual layouts: Linear and Flow.

Virtual layouts are helpers that will set the right constraints on their referenced views for you. Virtual layouts themselves act as normal views, with their own constraints.

There are two (new) virtual layouts in 2.0: Linear and Flow.

Linear will create horizontal or vertical chains, somewhat similar to a linear layout, but as a helper. It’s, more or less, like nesting a linear layout in the ConstraintLayout, but with improved performance and the advantage that you can still use the referenced views of the Linear helper to create constraints (outside of the Linear helper object).

Flow implements FlexboxLayout-like behavior. Overflow elements will be pushed to the next row. And again, like with Linear, you will be able to position outside elements relative to the individual view in Flow.

Layer

Layers allow you to show, hide and lock elements in the editor and to graphically manipulate a collection of views. The calculations of these graphical operations will all be handled by the system. One use case of layers is the ability to lock a specific layer of views with their constraints, like you would lock a layer in digital image editing software.

Circular reveal

The circular reveal helper lives up to its name: it reveals elements with a circular animation. The helper handles the math for you and only applies the reveal animation to the referenced views.

Layout management

In ConstraintLayout 1.1, ConstraintSets were introduced. This class allows you to create and save constraints, and apply them to an existing ConstraintLayout. With ConstraintSets you can build keyframe animations fairly easy.

With ConstraintLayout 2.0, however, this becomes even easier! You can now specify states within a separate xml file where you link a state to a set of constraints.

The same beautiful animations but with even less code!

A nice addition is that you can specify a region, like a minimum width, for which a specific set of constraints should be applied. This way, the right constraints are automatically applied when the window gets resized.

Fluent API

ConstraintSets are great to capture and manage full state, but they’re not ideal for direct manipulation. To remedy that, the Fluent API was created. It lets you manipulate constraints directly in your code by changing their layout parameters. Setting margins, adding new constraints to a view, adjusting bias – it will all be present in the API.

MotionLayout

MotionLayout is a brand new layout, that will be released together with ConstraintLayout 2.0.
It is a subclass of ConstraintLayout and is tailored to make animating between ConstraintSets even more effortless. It will support custom attributes for ConstraintSets, key frames to distort the animation path and key cycles to add variety in the motions. Also, a dedicated, timeline-based animation tool is currently in development.

And now for the next steps…

In this article, we’ve taken a quick look at what we can expect from ConstraintLayout 2.0. As we could see during the Google I/O talk, there are a few nice additions on the way, and I’m personally pretty excited to try them out! I think the virtual layouts will be particularly handy.

While we’re excited to see all these new features for the 2.0 version, we also hope it will include some improvements to the Android Studio layout editor. Because while in theory, working with ConstraintLayout in the layout editor should be a piece of cake, we regularly encountered difficulties in practice. The layout editor can sometimes act in weird and unexpected ways. For example, we’ve often found ourselves failing to add a certain constraint in the layout editor, while this wasn’t a problem in xml. Hopefully this won’t happen again after the 2.0 release.

ConstraintLayout 2.0 (with Motion Layout) will be released “in a few days” according to the team (statement from May 10) – you can expect a more hands-on follow-up to this post later!