



If we change our Flow to have aligned wrap mode we get something closer to what we want. In aligned mode, the 1st item of each chain will be in the 1st “column”, the 2nd item of each chain will be in the 2nd “column”, and so on. In chain mode each row is treated as an independent chain, so items won’t necessarily line up vertically. The other possibility for wrap mode is aligned, which tells the Flow to line up the items vertically, as well as horizontally. However, since Flow treats each new line as a new chain, the last line doesn’t fit with the grid. Now, instead of extending past the constraint edges on the left and right, the Flow makes the items wrap onto another line. To tell the Flow to wrap when it reaches the constraint, we’ll use chain for wrap mode. The default value of none creates a regular ConstraintLayout chain, which extends past the edge of its constraints on both sides. The main attribute of Flow is app:flow_wrapMode, which specifies how the Flow should handle elements that extend past the constraints. Right now, we haven’t specified any attributes for the Flow, so all the Flow attributes are at their defaults.
#FLOWLAYOUT VS TABLE LAYOUT CODE#
To start, we’ll put 10 square views into a Flow like the one in the code above.
#FLOWLAYOUT VS TABLE LAYOUT ANDROID#
The gridĪ pretty common ask of Android developers is to create a grid of items. While there are many combinations of Flow attributes that result in a variety of layouts, I’ll focus on two use-cases that I think will be the most common usage of ConstraintLayout Flow: grid and flexbox-style layouts. If you’ve used Group or Barrier before, you’ll be familiar with this it works exactly the same as it does in those virtual helper objects. Notice the attribute constraint_referenced_ids – this attribute defines the Views that will be managed by this constraint helper. įlow is used within a parent ConstraintLayout and is able to manage any View with a defined id. However, instead of using an actual ViewGroup to manage the contained items, ConstraintLayout Flow uses a virtual helper object, so your layout maintains its flat view hierarchy. This is similar to Google’s FlexboxLayout, which is an Android implementation of the idea of the flexible box layout from CSS. With ConstraintLayout Flow, this changes.ĬonstraintLayout Flow allows a long chain of items to wrap onto multiple rows or columns. What if you have too many items to fit on one row? There hasn’t been a simple way to allow your chain to expand to multiple rows of items. ConstraintLayout Flow: Simple Grid Building Without Nested LayoutsĬonstraintLayout chains are great, but they only work for one row of items.
