ConstraintLayout 2.0
Our journey with the ConstraintLayout continues in the second part. If you miss the first one, you can check it out first in the link below:
In the previous one, we’ve investigated the basic features of the ConstraintLayout one by one. This time we’ll dive into some detail and see its upper limits.
We can separate the features provided in ConstraintLayout 2.0 into three different parts.
- Flow
- Layer
- MotionLayout
Flow
Flow can be considered as the robust version of the LinearLayout. By definition, it is a virtual layout that is used to chain views. Wait a minute! We know from the first part that ConstraintLayout has a feature called “chain” to make view groups and relate with each other. What makes Flow different? Chain is a great way to group views but it only works in one row. What if my views are too big to handle in a single row? I may require to handle views in multiple rows. At this time, Flow takes to the stage.
Since Flow is a virtual layout, it uses other view references and does not add a new level to your view hierarchy. This is what makes flow so powerful. The more view hierarchy you have, the more drawing time you have! It directly affects performance and performance should be one of the main concerns for us. Besides that, it saves you lots of boilerplate code.
Now, let’s see Flow in action, shall we?
Imagine that, you have six buttons to group but their size may change during runtime. Thus, it’s not guaranteed to fit them in a row. You can use flow in such a situation.
“wrapMode” attribute can be used to obtain the desired look. You can select
- none → (default) creates only one chain and overflows it there is no enough room. (!!! beware of the context out of the screen !!!)
- aligned → in case of overflow, creates another chain in another row.
- chain → in addition to aligned, it also aligns rows and columns.
Flow also can be used as GridLayout if you don’t have too many views to show. It also decreases RecyclerView complexity (adapter, rendering time, etc.).It keeps the layout flat and increases performance.
“horizontal_style” and “vertical_style” attributes are other cool properties of the flow. Just like the chain in ConstraintLayout possible values are:
- spread → Views are spread inside parent view with equal spacing between views and parent view. (Default value)
- spread_inside →Views are spread inside parent view with equal spacing only between views by taking parent view’s size.
- packed →Views are packed at the center without filling parent view.
Note: When packed style is applied, default 0.5 bias value is also applied.
app:flow_horizontalStyle = "spread | spread_inside | packed" app:flow_verticalStyle = "spread | spread_inside | packed"If you want to give some manual gap between the views, you can use “horizontalGap” and “verticalGap” attributes.
app:flow_horizontalGap= "8dp"
app:flow_verticalGap= "8dp"Layer
Layer is another cool property that comes with ConstraintLayout 2.0. You can consider it as a robust Group. It is a virtual helper that groups view without adding hierarchy and allows you to do some operations with all views in the layer including animations at the same time! You can rotate, translate and scale views simultaneously without repeating the code over and over.
Its usage is just like Group. You just need to add the reference ids of the view that you’d like to add and you are ready to go!
Now let’s make an easy example.
Motion Layout
Motion Layout is the last but definitely not least property of ConstraintLayout 2. To be honest, it’s the most exciting one for me and it deserves its own article. Motion Layout will be the third and the last part of this series. I’ll see you there.
