Create a beautiful layout with constraint layout 2.0
Constraint layout have an ability to create a complex layout without increase hierarchy but there were certain scenarios where just having a flat layout makes development further complex. Those problems are sorted out in constraint layout 2.0 and it also offers complex animation using the motion layout.
Flow
It’s a virtual layout which offers all capabilities that linear layout can offer while using flow you can create views without specifying individual view constraint because it requires all those views to be referenced to flow and just assign constraint to flow is sufficient.
Why flow is called as the layout is because it offers capabilities like layout where you can set padding, background, align to other view and best of all is that you get all those without adding a viewgroup, as viewgroup is not added that means any individual view referenced in flow can also be referenced directly instead of referencing only flow.
An added advantage with the flow is that in case it doesn’t have space to fit all views in a single row then it can split it to multiple rows for that you have to specify app:flow_wrapMode
Apart from adjusting all views with the same spacing, you can also give different style like packed, spread or spread_inside for the first or last row or column using flow_firstHorizontalStyle, flow_lastHorizontalStyle, flow_firstVerticalStyle and flow_lastVerticalStyle
app:flow_maxElementsWrap defines the number of views in a row
Also, views can be aligned based on other view positions like align bottom, center, baseline, and top for horizontal direction flow, and for vertical direction flow you can set start, center, and end. One important thing to remember here is whatever is your flow direction the align should be opposite to that for example if you are using android:orientation=”horizontal” then for alignment you should use verticalAlign like this app:flow_verticalAlign=”bottom”
As I stated before it’s a layout so it also offers capabilities of layout like setting a margin, padding or background
One thing to notice here is app:flow_horizontalGap this is for setting the space between individual views in a flow
Just like a chain in the previous version of constraint layout where you can set bias, here also it’s possible to do it either on entire view in flow, the first or last row or column. One thing to remember is bias will only work when you specify chain style as packed
Those are the features offered in constraint layout 2.0 using flow, in the next article we will see more features offered for image view and a button.
Here is the link to find tutorials on constraint layout features, do subscribe the channel to get notifications for the upcoming videos
https://www.youtube.com/playlist?list=PLOE5ZW4TrQKrcZNKGatcsOwWsEZqEf_Fp
