Exploring helper CircularFlow

CircularFlow is a new helper available in ConstraintLayout 2.1 beta 1

Before starting

I would like to recommend to read this documentation about circular references in ConstraintLayout.

What are the helpers?

ConstraintLayout 2.0 presents two new helpers with different purposes; Flow is a combination of Chain and Group that help us to chain the views with dynamic size at runtime. Layer is another helper that helps us when applying transformations such as rotation, translate or scaling multiple views.

What’s CircularFlow?

CircularFlow is a new helper that I have added to ConstraintLayout library (2.1 beta 1) that will help us to resolve circular references easily, it also reduces our lines of code in layouts.

Can I use it in MotionLayout?

Yes, of course 🙂

Let’s go to the code

This is an example from a CircularFlow in a layout

<androidx.constraintlayout.helper.widget.CircularFlow
    android:id="@+id/circularFlow"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:circularflow_angles="45,90,135,180,225"
    app:circularflow_radiusInDP="90,100,110,120,130"
    app:circularflow_viewCenter="@id/view1"
    app:constraint_referenced_ids="view2,view3,view4,view5,view6" />

constraint_referenced_ids : It receives IDs of the views that will add to the references.

circularflow_viewCenter : It receives the ID of the view of the center where the views received in constraint_referenced_ids.

circularflow_angles : Receives the angles that you will assign to each view.

circularflow_radiusInDP : Receives the radius in DP that you will assign to each view.

How to add a view at runtime?

With method addViewToCircularFlow you can add new views to CircularFlow.

findViewById<View>(R.id.view7).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).addViewToCircularFlow(
                it, 140, 200F
            )
        }

How to remove a view at runtime?

With method removeViewFromCircularFlow you can remove a view from CircularFlow.

findViewById<View>(R.id.view2).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).removeViewFromCircularFlow(
                it
            )
        }

How to update angle from a view in CircularFlow?

With method updateAngle you can update angles from views in CircularFlow.

findViewById<View>(R.id.view2).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).updateAngle(
                it, 90F
            )
        }

How to update radius from a view in CircularFlow?

With method updateRadius you can update radius from views in CircularFlow.

findViewById<View>(R.id.view3).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).updateRadius(
                it, 150
            )
        }

How to update angle and radius from a view in CircularFlow?

With method updateReference you will can update angles from views in CircularFlow.

findViewById<View>(R.id.view4).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).updateReference(
                it, 160, 135F
            )
        }

Default radius and angle for CircularFlow via XML

These two attributes are a little improvement from the helper.

app:circularflow_defaultRadius="140" This attribute receives an Integer value for setting default radius.

app:circularflow_defaultAngle="135" This attribute receives a Float value for setting default angles.

So you can reduce length of lines as follows:

<androidx.constraintlayout.helper.widget.CircularFlow
    android:id="@+id/circularFlow"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:circularflow_defaultRadius="140"
    app:circularflow_defaultAngle="135"
    app:circularflow_angles="45,90"
    app:circularflow_radiusInDP="40,60"
    app:circularflow_viewCenter="@id/view1"
    app:constraint_referenced_ids="view2,view3,view4,view5,view6" />

Where view2 has set 40dp radius and angle in 45, the view3 has set 60dp radius and angle in 90 and rest of views (view3, view4, view5, view6) sets your radius in 140dp and angle in 135.

If circularflow_angles or circularflow_radiusInDP is not added, the default values are 0 for radius and angles.

End comments

I am very happy to see these lines of code in this library being used by so many Android Developers. I am thrilled to be sharing this article explaining you how to use this features.

An extra, in case you want to see the PRs to Google ❤️

Pull request I
Pull request II
Pull request III
Pull request IV