Constraint Layout 2.0 — Flow Tag Introduction

Constraint Layout 2.0 brings several new features to Constraint Layout. To use it, bump the version in build.gradle.

implementation "androidx.constraintlayout:constraintlayout:2.0.1"

What is Flow?

Flow is a new virtual layout Added in 2.0 for building chains that can wrap to the next line. It allows positioning of referenced widgets horizontally or vertically, similar to a Chain or even another section of the screen, when they run out of screen space. This is useful when you’re laying out multiple items in a chain but you’re not quite sure how big the container will be at runtime. You can use this to build your layout based on a dynamic size in your application.

Flow Modes Visualization

One of the most important options to Flow is wrapMode, which allows you to configure what to do when the content overflows (or wraps).

You can specify three options for wrapMode:

• none – create a single chain, overflowing if the content doesn’t fit
• chain – on overflow, create & add another chain for the overflow elements
• aligned — similar to chain, but align rows into columns

To learn more about Flow, read the official docs.

Figure: Visualization of flow modes "none", "chain", "aligned"

Also, you can specify other options like horizontalGap & verticalGap to add margin between the views (see example)

Example usage of Flow tag in Constraint Layout

You add a Flow in Constraint Layout 2.0 using the Flow tag. Flow creates a virtual view group around the views you pass in constraint_referenced_ids, laying out the referenced views in a chain.

Constraint Layout 2.0 has a lot of new features to improve our apps a lot!

Github link