Illustration by Virginia Poltrack.

Introducing Constraint Layout 2.0

Constraint Layout is one of the most popular jetpack libraries and we’re happy to share that Constraint Layout 2.0 is out! It has all of the features of Constraint Layout 1.1 that you’re familiar with to build complex layouts quickly, with tooling integrated with Android Studio to preview your XML or even edit your layout.

Constraint Layout 2.0 brings several new features to Constraint Layout. To use it, bump the version in build.gradle.

implementation “androidx.constraintlayout:constraintlayout:2.0.1”

With the release of 2.0 we’ve also created a github repository for Constraint Layout. It’s currently a read-only repository and we are working to enable pull requests.

Flow

Flow is a new virtual layout for building chains that can wrap to the next line, or even another section of the screen, when they run out of room. This is useful when you’re laying out multiple items in a chain but you’re not quite sure how big the container will be at runtime. You can use this to build your layout based on a dynamic size in your application, like screen width on rotation.

Figure: Animation showing Flow creating multiple chains as elements overfill a row

Flow is a virtual layout. Virtual layouts in constraint layout are virtual view groups that participate in constraint and layout, but don’t add levels to your hierarchy. Instead, they reference other views in the Constraint Layout to complete the layout.

Figure: Visualization of flow modes "none", "chain", "align"

You add a Flow in Constraint Layout 2.0 using the Flow tag. Flow creates a virtual view group around the views you pass in constraint_referenced_ids, laying out the referenced views in a chain.

Example usage of Flow in Constraint Layout

One of the most important options to Flow is wrapMode, which allows you to configure what to do when the content overflows (or wraps).

You can specify three options for wrapMode:

• none – create a single chain, overflowing if the content doesn’t fit
• chain – on overflow, create add another chain for the overflow elements
• align — similar to chain, but align rows into columns

To learn more about Flow, read the official docs.

Layer

A new helper, Layer, lets you create a virtual layer from several views. Unlike Flow, it doesn’t lay the views out. Instead, Layer lets you apply transformations on several views at once.

This is useful if you want to build animations to rotate, translate, or scale several views together.

Figure: Apply transformations to multiple views together using a Layer

A layer is sized during layout, and will be sized based on all of the views it references.

To add a layer in Constraint Layout 2.0, use the Layer tag:

Example usage of Layer in Constraint Layout

Motion Layout

Animation: Screens of the new Motion Layout Integrations sample

Motion Layout is one of the most anticipated features in Constraint Layout 2.0. It provides a rich animation system for coordinating animations of multiple views. MotionLayout is based on ConstraintLayout and extends it to allow you to animate between multiple sets of constraints (or ConstraintSets). You can customize how the views move, scroll, scale, rotate, fade, or even animate custom attributes. It can also handle physics based gestures and control velocity of animations. Animations built with MotionLayout are seekable and reversible. That means you can jump to any point in the animation, or even play it backwards.

Integrated in Android Studio, the Motion Editor lets you build, preview, and edit animations using MotionLayout. This makes it easy to tweak the fine details of an animation when coordinating multiple views.

Learn more about the Motion Editor read this blog post by Scott Swarthout

Introducing the Motion Editor

Learn Motion Layout with a hands-on guide, check out the Motion Layout codelab:

Advanced Android in Kotlin 03.2: Animation with MotionLayout

Motion Layout is a general purpose animation tool — you can use it to build pretty much any animation on Android. However, there are two situations where Motion Layout excels at building animations compared to other options.

• Seekable animations — animations that are driven by other inputs, such as a collapsing toolbar which responds to scrolling
• State transitions — animations that are driven by a state changing, such as the user entering a screen

The new Motion Layout Integrations sample shows how to use Motion Layout to build rich animations for these use cases. Each screen is intended to showcase practical animation effects you can build using Motion Layout as well as how to build integrations with other views.

android/views-widgets-samples

There’s a lot of new features in Constraint Layout 2.0. Check out the docs, codelab and sample to get started using it in your app.

We can’t wait to see what you build!