Introducing Constraint Layout 2.0

Tram Ho

Constraint Layout is one of the most commonly used components in Android’s Jetpack library. Recently, Constraint Layout version 2.0 has released new features which are very useful and interesting. In this article, I will summarize some of those features for us to learn together.

First, to use Constraint Layout 2.0 in the project, we must add its dependency to the build.gradle file:

implementation “androidx.constraintlayout:constraintlayout:2.0.1”


Flow is a new virtual layout for constructing linked views that can be broken down the line, or another part of the screen, when they exceed the space allowed. This feature is useful when we use multiple items in a link, but is unsure of the size of the container at runtime. We can use this feature to build dynamic sized layouts for apps.

How Flow creates the alignment when the element sizes exceed the container capacity.

Flow is a virtual layout. The virtual layout in layout constraint is the virtual view groups involved in creating the layout of the layout, but not added to the layout hierarchy tree. Instead, they refer to other views in constraint layout to improve the layout.

Simulate the Flow modes: none , chain , align

To use Flow in Constraint Layout 2.0, use the Flow tab. Flow creates a virtual view group around the view that we pass in constraint_referenced_ids , for example:

One of Flow ‘s most important properties is wrapMode , which allows us to set the behavior when content overflows, i.e. a line break is needed. We can specify 3 values ​​for wrapMode , including:

  • none – creates a single chain, overflowed content will not be processed.
  • chain – when overflowed, creates a new chain for the overflow elements.
  • none – Similar to chain , but aligns elements by column. To better understand Flow , you can read the official documentation about it.


Continued as a new helper, Layer , allows us to create a virtual layer from several views. Unlike Flow , Layer does not help us to arrange the position of the view. Instead, it allows us to apply transformations across multiple views at once. This feature is useful when we need to build an animation to rotate , translate or scale several views together.

Apply transformation to multiple views at once using Layer

A Layer is sized in the layout and will be sized based on all the views it references. To use Layer in Constraint Layout 2.0, we use the Layer tab, for example:

To better understand Layer , you can read the official documentation about it.

Motion Layout

MotionLayout examples by Google

Motion Layout is one of the most anticipated features of Constraint Layout 2.0. It provides a rich set of animations for connecting views. MotionLayout is based on ConstraintLayout , more specifically, it inherits from ConstraintLayout , allowing us to create animations between sets of constraints (or ConstraintSet ). We can re-customize the way the views move, scroll, zoom, rotate, blur or any other animation properties. MotionLayout also handles physical gestures and controls the speed of animations. MotionLayout built-in MotionLayout can be MotionLayout . That means one can jump to any moment of the animation or reverse it.

Built into Android Studio, Motion Editor allows you to build, preview and edit animations built by MotionLayout . This means that we can easily customize, set up and build animations that best suit our application. MotionLayout is a very versatile animation builder. We can use it to build any cool effect in Android. However, there are 2 scenarios where MotionLayout outperforms other options:

  • Animations are rewindable : animations that are controlled by inputs, such as scrolling the toolbar.
  • State transitions : the animations are controlled by state change history, such as the user entering a screen.

This new MotionLayout integration example shows us how to use MotionLayout to build a variety of rich animations with different usage scenarios. Each monitor is built to provide solutions for real-world situations when developing Android apps. You can refer to to get a better view of MotionLayout , as well as be able to easily integrate it into your application.


Above are the features that I summarize from ConstraintLayout 2.0. In addition, there are many other features that you can find in its documentation. If you find any other interesting features, please share.

Thanks for taking the time to read the article.


Introducing Constraint Layout 2.0

Share the news now

Source : Viblo