Circular Positioning in ConstraintLayout

In this post, we are going to learn some tricks about ConstraintLayout to build a more flexible UI for our Android Application.

What is ConstraintLayout?

According to the official documentation:

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

ConstraintLayout helps us to maintain a flat view hierarchy and ultimately increasing the performance. There are many benefits of using ConstraintLayout but in this post, I will be showing the Circular Positioning in ConstaintLayout.

The final design will look like this:

To use CircularPostioning, we need to have a reference view which will act as a base for other views to laid out in circular fashion.

In the above code snippet, the button is the base view around which other views will be laid out.

Once we have the XML ready, we can add views to ConstraintLayout dynamically.

layout.circleRadius is the length of the radius from the base view(main_button in our case).

layout.circleConstraint is the view id of the base view relative to which the views will be laid out.

layout.circleAngle which angle the widget should be at (in degrees, from 0 to 360)

In this sample app, I am changing the color of the background drawable every 100 milliseconds to make it look like a progress bar. The complete sample code is available here.

Happy coding!!😊