DevNibbles
Published in

DevNibbles

ConstraintLayout: Circular Positioning

The ConstraintLayout library for Android is a great addition to the platform, and the team are currently working towards v1.1; yesterday they released their latest beta (beta3).

One of the more interesting additions in this release is something called Circular Positioning. As the name would suggest, this allows you to constrain a view relative to another view based on an angle and radius.

See this example from the official documentation https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#CircularPositioning

Being able to constrain views in this way make some normally very hard layouts and animations extremely easy. Imagine a situation where you’d like to simulate the movements of planets, you might have the Sun in the center of the screen and the planets orbiting around it.

Without using the new features of ConstraintLayout you’d probably tackle this by creating a custom view and drawing bitmaps to a canvas. This would work perfectly well but could be a lot of work and having the planets interact with other views outside of the custom view would be near impossible.

Lets create a sample app which shows some neat tricks you can use these new constraints for. In this sample we’ll animate 3 planets around the sun to keep the code short and easy to follow. The final outcome should look something like this.

The layout for this screen is extremely simple and the hierarchy is very flat.

I’ve highlighted the new constraints in bold.

At this point I think you’ll agree we have a pretty good looking app that could be released to the Google Play Store, but lets take the power of ConstraintLayout one step further and add a ConstraintSet animation when the Sun is clicked. In this example we’ll show some details about each of the planets.

The power of the ContraintLayout and ConstraintSet here means it doesn’t matter when we click on the Sun to initiate the change from animation to details, the planets will move in a natural way from their current position to their final resting place.

To achieve this we first add some hidden TextView fields in the first layout file, and give each one a name, then in a second layout file we show these TextViews and set their constraints to sit next to each planet. We also modify the planet constraints to have them laid out vertically. The XML for this final layout looks like this.

The final bit of code for our Activity looks like this

Here you can see where we’ve added the click listener to the Sun image and we’ve tidied up some of the code by moving the ValueAnimator setup into a method along with some helper classes for starting/cancelling the animations.

I’ll upload the code for this project to Github soon, but in the mean time I’d love to hear your feedback, so please leave me a comment below.

--

--

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
Andrew Kelly

Android Developer // Google Developer Expert for Android. Based in Sydney Australia