How to Use Flows in Android ConstraintLayout to Build Complex Layouts?

Last Updated : 28 Apr, 2022

If you are an android developer you already know how difficult it to create a GridLayout. Also, layouts like GridLayout and LinearLayout are not that light weight for your tiny mobile phone display, they cause our phone’s display to function slow and because of this user experience of application users is not that good. Due to these types of problems, Google has introduced a feature known as “flows” in the constraint layout 2.0 and above. Flows are used to make the layouts like GridLayouts and LinearLayouts in a much easier and efficient form. Also, it is lightweight for your android phone display. As flows make our work easy, it is easy to implement in your android application. Following are the steps how you can create layouts like GridLayouts with flows.

Step by Step Implementation

Step 1: Open your Android Studio and click on start new project, give a suitable name and package name and select API levels shown in the below image and click on the finish button. After the successful gradle sync your good to go to the next step.

Step 2: Drag and drop the views in the constraint layout section as shown in the below image. Here we have used only buttons for reference, you can add any type of views in the constraint layout. Make sure that your root layout must be a constraint layout. Also, change the layout width of buttons to be match constraint (0dp) so that buttons will occupy the maximum space as needed in this project. Do not constraint your views in a constrained layout.

Step 3: Click on the guideline section and there you will get the add flow option, click on it and your flow is added to the component tree section. Now select the flow and change the layout width to be match constraint (0dp) and also add the constraint to flow according to you.

Adding flow into the component tree

Step 4: Select all the buttons using “ctrl+ left mouse click” and drag all images into the flow. This will give all the reference ID to the flow for the actions to perform on that buttons using the flow. You can also specify a reference ID in the flow attribute name as “constraint_referenced_ids”, just pass the ID names of buttons separated by commas.

Selecting and adding all buttons to flow

Step 5: Now we have to set some important attributes of flows to make the actual design like grid layout. Following are the important attributes for flow to work.

Orientation: This attribute is used to set the orientation of the views that are going to appear using flow. We have two options horizontal and vertical. Choose the orientation according to your need, here we have used horizontal orientation. Below is the image which is showing how views are arranged when we add orientation = “vertical”.

Flow Wrap Mode: This attribute sets the alignment of the views inside the layout. It accepts three types of values.
- Chain: It will set the views in a chain each view will be attached with the nearest view.
- Aligned: It will align the views according to space. No more extra space will be taken by the views in the layout
- None: The views are aligned as per orientation.

Example of aligned mode

Flow Max Element Wrap: This attribute sets how many elements should be in one row. Its value can be any integer value. In this example, we have used its value to be 2.
Flow vertical gap and Flow horizontal gap: This attribute is similar to the margin. It added the spaces between the views that we have added inside the ConstraintLayout. The following image shows how views are aligned in layout after setting all the attributes.