Using ConstraintLayout with Circular Positioning on Android

I was working on a feature for a client that involved custom views with Android. While researching ConstraintLayout, I saw that it had a circular positioning feature. It seemed pretty neat, so I thought I would circle around when finished and build a demo.

The basics of Circular Positioning are fairly straight forward:

  1. You define a view as the center
  2. You create a circular constraint for each view you want to surround it

I learned a lot from the following article:
https://www.journaldev.com/21366/android-constraint-layout-circular-positioning

Features

You can build a circular restraint in a layout file. It’s a great first exercise. Yet, I wanted to be able to change the number of views that circled the center. To do that I needed to create a custom view.

It seemed like it would be a good learning experience. I have never had to create constraints in code before. Judging by what I saw on the internet, few others do either.

My demo lays out my items in a circular layout and gives the option to the user to change the number of items. When changed, the view re-constrains everything in a balanced circle.

For example:
2 items = 50%, 3 items = 33.3%, 4 items = 25%, and so on

circular layout with faces
My custom view – with 8 images surrounding the center

The Custom View

My custom view is called CircularIconLayout

  • It extends ConstraintLayout – simply because I am building a ConstraintLayout!
  • I base the views in the circle on a section count
  • I pass in a layout file that is used for the views in the circle. This allows me to use any type of view I want

When putting everything together, I follow these general steps:

  1. I create a TextView and constrain it to the center (centerView)
  2. Create a separate view for each section of the circle
  3. I calculate where to place the views around the circle:
    1. divide the number of sections by 360
      • example: 360 / 4 = 25 degrees for each section
    2. determine the center of each section
      • example: 25 / 2 = 12.5 degrees is the middle of each section
  4. Create a constraint for each view using constrainCircle()

I keep a list of the views for reference (sectionList). When the user changes the number of sections, I update the list and re-constrain everything to the centerView again.

Here is some code showing how to setup the constraints:

// constrain sections to the centerView
val constraintSet = ConstraintSet()
constraintSet.clone(this)

// constrain centerView to the middle of our (parent) view
constraintSet.connect(centerView.id, ConstraintSet.TOP, this.id, ConstraintSet.TOP)
constraintSet.connect(centerView.id, ConstraintSet.BOTTOM, this.id, ConstraintSet.BOTTOM)
constraintSet.connect(centerView.id, ConstraintSet.START, this.id, ConstraintSet.START)
constraintSet.connect(centerView.id, ConstraintSet.END, this.id, ConstraintSet.END)

// calculate where to place each view surrounding the center
val distanceFromCenter = circleRadius.toDensityPixels()
val segmentDegrees: Float = 360.0f / sectionCount.toFloat()
var angle: Float = segmentDegrees / 2.0f

// constrain each section to the centerView
sectionList.forEach { section ->
    constraintSet.constrainCircle(section.id, centerView.id, distanceFromCenter, angle)
    angle += segmentDegrees
}

constraintSet.applyTo(this)

Formatting the views in the circle is left up to the Activity or Fragment that calls it. For example, the activity could use the sectionList to load images into the ImageViews that are in the circle.

Extra features

I tried to make the demo simple, but I got a little carried away in the Activity:

  • The user can change the number of items displayed in the circle
  • The user ALSO can change the type of views used in the circle. You can switch between images and text

I also added a couple other features:

icu4j or RuleBasedNumberFormat – a library for spelling out numbers. i.e. 1 = “one”, 12 = “twelve”, and so forth.

RandomColors
I found an example for creating random colors from a pool of acceptable colors on Stack Overflow. I made some improvements and used it to generate random colors.

The Demo

For me, code speaks louder than words. Checkout the demo at my github repo:
https://github.com/jjerome00/CircleLayout

demo video gif

Building a Washington State Ferry decoration

Night shot of ferry outside

I built a working WA State Ferry decoration for my yard.

I like to work on projects that are a little outside of things I usually work on. I have no idea how to achieve it, and spend most of the year working on it in my spare time.

Some of my past projects:

For this post I want to expand on how I made some challenges, and how I overcame them.

You can see an overview of the entire process here:
  https://imgur.com/gallery/6KvSis8

Movement and Control

My original idea for the ferry was to use an aluminum rail with a wheeled sled. I found one while I was working on a different project. I had aspirations of building something similar to a 3d printer to control it. As I was working through how to achieve this, it became clear it would be too complicated and hard to maintain.

I had researched garage door openers in the past for my ski lift. I ruled it out since it wasn’t designed to run all the time – I was afraid it would overheat. I revisited the solution again for the ferry. I researched various models and features, and kept an on craigslist until one showed up.

At first I thought I would have the ferry run on a schedule. Every 15 minutes it would automatically switch sides. It didn’t take long to come to the conclusion that it was better to have the user press a button.

Testing a LED button with alligator clips
You can never have too many alligator clips

Garage door openers already have an option for a button. One downside is that the button can be used at any time to stop progress of the opener. I did not want the button press to be so responsive. Once the process started I wanted it to finish. This is where I decided to use an Arduino to control the button. I have a separate blog post showing how I achieved this: https://www.jjerome.com/2019/07/03/using-arduino-to-ignore-button-presses/

The button behavior was fairly straight forward, but it would take some experimentation. I learned long ago that a good test environment gives you the highest chance of success. I had to be diligent about making my project easy to pickup after leaving it alone for a month . This meant well organized code, version control, and pictures of my breadboard setup.

I organized actions into functions:

  • instead of writing digitalWrite(LED_BUILTIN, HIGH) to turn off an LED
  • I had a functions called turnBuiltinLEDOn() and turnBuiltinLEDOff()

Staying organized made it a lot easier to crawl back into my code when needed.

What things should look like

I knew I had to make:

  • a ferry that looked like a ferry
  • a cover for the motor to keep it dry, and it should look like part of the scenery
  • something else on the other side, that also fit the scenery
A model made to look like a ferry boat.
A boxy Washington State Ferry

The Ferry
There are lots of examples of ferry online. I looked at a few pictures of real WA State Ferries, and a few drawings as well. I’ve found that people like decorations that look more like a cartoon than the real thing. I also wanted the ferry to look homemade. I settled on something with more rounded port holes, and the same color scheme as real thing. I also wanted some room for some cars.

A diecast model on the ferry
Our first customer

I thought it would be neat to have all our cars represented on the ferry. Finding a model for a classic VW Beetle was not that hard. Finding a Eurovan and a Chrysler minivan were a bit harder. I found some cheap diecast models on ebay. They looked close enough, I painted them to look like our vehicles.

waiting for a painted diecast model to dry
A makeshift drying station

There seems to be a large diecast model community. There was plenty of advice on how to paint the models. I follow most of the advice, but I cut a few corners here and there. I didn’t strip the old paint, and I had to paint with a brush. For some reason every model was advertised as 1:32 scale. But when you compared them next to each other the scale is not accurate. I did my best with the time allotted.

The Terminal
For the side of the Garage Door opener with a motor, I made something that looked like a terminal. The only problem was that the real terminals do not look like much. You would be hard pressed to see one if you were not paying attention. I settled on a bland white building, with a large version of one of the logos on the side. I borrowed this idea from some of the airlines that paint a huge logo on their hangars at airports. I wanted to have windows that could light up, but I decided that could be a feature for another time.

A picture of a box painted to look like a ferry terminal in a cluttered garage.
A ferry terminal hanging out in a cluttered garage

The Dock
While researching terminals, I saw a lot of pictures of docks. The main thing about the docks is that they had a large structure that went high in the air. I decided to build a similar looking structure as a dock for the other side. I got a little fancy and came up with a pattern that made it look pretty good.

Assembling the ferry dock
Assembling the ferry dock

Storage

Storage is a big deal. We knew from past experience that you must account for storage. Any time I have made an exception it has a certain cost in the future. From the outset I had a plan for how I was going to store everything:

  • The ferry is held together by bolts, and comes completely apart
  • The ferry dock is also held together by bolts
  • The terminal serves as a box that holds all the other parts
  • I’m going to store the garage door opener, in the garage! Since the track is attached to the motor, I can hang it up high as one piece

I built the platforms as I needed them. I originally thought I’d use a ladder for one side, but it didn’t work well when I had everything together. Both these platforms come completely apart. I learned a lot from watching a youtube video for building modular stages: https://youtu.be/ff8LiHGpFKQ

Extras

One of the things I like about this project is that I got it to the point where I have a lot of flexibility. At this point the project is using the same techniques used by model train builders for their scenery. I have a few ideas:

  • I want to light up the terminal at night. I plan to cut out the windows (the black rectangles), and install some translucent material with lights behind them
  • Some friends got me models of their cars for the ferry. One of them had LED headlights. I rewired them so that they work on external power instead of batteries. I’d like to put this car on the dock and power it so that its lights shine at night
  • I want to install some lights on the dock
  • Someone suggested I add a small horn when the ferry starts, but I’m thinking that will start to annoy the neighbors after a while 🙂
Night shot of ferry outside

In Summary

This was a fun project! I felt like I got to apply some lessons learned from past projects and it went fairly smoothly. This ferry incorporates more features than the other projects. The interactive part really makes it a crowd-pleaser.

Jay Inslee, Governor of Washington State, said "Nice work" on Twitter.
Wow!

Lego Saturn V Rocket

Picture of reading Lego instructions

We finished our Lego Saturn V! Just in time to celebrate the 50th anniversary of the moon landing.

I like to pick projects to do with my kids. Sometimes it’s just a puzzle, and other times it has been Lego. This was one of those projects.

You can find a ton of reviews for this set online, and it seems like I am the last person to complete the set. The reviews are true – it’s a great set, well thought out, and very large. You can even add some lights and sound if you want.

Motivating your family

I have found my kids don’t necessarily want to do something if I ask them. Instead, I have had a lot of luck just starting a project in a common room, and they kind of gather on their own. For instance, I’ll start a puzzle and pretty soon someone shows up. They usually start by asking me what I’m doing. They might make fun of it. Soon they start watching. Then they start helping me. Coincidentally, this also works on my significant other 🙂

How to find one

These sets used to be hard to find, but that doesn’t seem to be the case anymore. If you are having a hard time find this set or another set like it, there are some websites that will alert you when a set is back in stock. In hindsight, I probably could have waited longer for a used set to show up online.

If you are looking to save a little money, you might do well to find a used set. For me, I was only interested in the rocket – I did not care too much about the lunar lander and stand. If I would have waited an extra year I could have saved a lot of money. You might do well to find a set that is missing some of these accessories. At least for me, tracking down missing parts can be part of the fun of constructing a set.

Here are some other Lego projects I have worked on: