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
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:
1 2 3 4 5 6 7 8 9 10 | <androidx.constraintlayout.helper.widget.Flow android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:flow_wrapMode="chain" app:constraint_referenced_ids="card1, card2, card3" /> |
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 tochain
, but aligns elements by column. To better understandFlow
, you can read the official documentation about it.
Layer
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:
1 2 3 4 5 6 | <androidx.constraintlayout.helper.widget.Layer android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="card1, card2, card3" /> |
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.
summary
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.