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 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!!😊

Android Developer at upGrad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store