ConstraintLayout 1.0

What happened since the first release of ConstraintLayout? Has it changed for the better or the worse? These and similar questions will be addressed below:

Introduction

It’s been a while since I last wrote about ConstraintLayout and how fun playing around with it is. Meanwhile it went through several alpha, beta and stable versions, so let’s dive into the latest 1.0.2 version this time.

Performance

Just as I did in my last post; I will check the measuring, layouting and drawing performance of ConstraintLayout in comparison with regular ViewGroups like RelativeLayouts and LinearLayouts. I will use two different screen designs for testing (simple and complex), you can find the layout sources in the github repo at the bottom.

 

ConstraintLayout 1.0 ConstraintLayout 1.0 exampleConstraintLayout 1.0 example

The first image shows the simple layout for the first test. The second one shows the constraints used in the ConstraintLayout version, and the third shows the skeleton of the plain old ViewGroup version.

ConstraintLayout 1.0 loremConstraintLayout 1.0 lorem complexConstraintLayout 1.0 complex layout

These are the more complex layouts for testing in the same order as previously (screen, constraint implementation, regular implementation).

Before anyone complains about the useless funny looking cyclic layout part of ImageViews, please keep in mind that this is only for testing and I wanted to provide an example which has high complexity with minimum Views. Furthermore if you investigate the regular implementation, you will see that this part can only be implemented if you use a dummy view in the center so that all of the surrounding views can measure correctly. Please feel free to correct me if I’m wrong on this last part, but I could not find any other solution without using custom Views and sticking with the ImageViews WRAP_CONTENT measurement.

For the measurement I used a Nexus 5X Emulator running on API level 23 and the tool I’ve used was the Android Device Monitor’s Tree View perspective, which can obtain the layout times for the desired View node. The time results can be seen below.

ConstraintLayout 1.0 perfermance

The results show that ConstraintLayout is a bit slower than the regular layout types (approx. 15 ~ 30%), but this time difference is still in the <10ms range which is not a big impact on static screens. Also, while creating the XML layout resources, I found that the Constraint versions of the screens are much more readable and ConstraintLayout usually produces smaller resources both in line count and View(Group) count. This is mainly because there’s no enclosing ViewGroups, everything is mainly the first child of the root layout. You can find all the used layout resources attached to the article at the end of the page.

Improvements

In my last post I had some thoughts about a few problems that I encountered, so let’s overview these first!

  • I have faced some issues with the centerX and centerY constraint, I am glad to announce: these constraints were removed. (big grin) I read about these two attributes and they were only wrappers for setting both the vertical or the horizontal constraints to the same anchoring view. So basically they removed them, so they cannot be misunderstood, but the functionality is still working. You have to set both constraints (like layout_constraintBottom_toBottomOf and layout_constraintTop_toTopOf) to the same view and it will work just like the centerX or centerY.
  • Last time I had some trouble with the Designer screen, it went out of sync and allowed some strange constraints leading to undefined behavior. Since then, the tool went through many improvements, I haven’t encountered any issues with it yet (using Android Studio 2.3.1 from Stable channel). But keep in mind, that I prefer to create the layouts in the XML editor.
  • I read through the “Build a Responsive UI with ConstraintLayout” documentation and I was totally satisfied with the clear explanation of how the “layout_width” and “layout_height” attributes work in ConstraintLayout. It was really confusing earlier, and it was also hard to find good tutorials that made it clear how they work in different cases.

The Designer tool went through many updates and the current version is pretty straightforward in my opinion. One must spend some time playing around with it, but after a few tutorials or some self-directed design implementation, I think all of its functions will be clear. Personally I dug up 3 or 4 screen designs from some old project end re-implemented them with ConstraintLayout. If you do it this way, you don’t only learn how to use the designer tool or the XML editor with the layout attributes provided, but you will notice how much simpler and clearer the resource code becomes if you compare it with the original code you wrote before.

And tons of changes and improvements since ConstraintLayout left the beta stage:

  • Relative positioning of widgets to parent or siblings
  • Centering positioning and bias control
  • Flexible size control (min/max/wrap/constrained)
  • Per axis group behavior (chains, weights)
  • Advanced visibility behavior (gone handling and margins)
  • Horizontal and Vertical virtual guidelines (fixed positions or percentage-based)
  • Aspect Ratio support
  • Advanced API to set constraints programmatically, allowing easy animations between layouts

I’m really excited about how popular ConstraintLayout will get in app development. On the long run, I hope it will be used in most of the future apps, and I look forward to how deeply it will change the logic behind designs.

Final thoughts

I think ConstraintLayout is a really powerful tool for developing logical, straightforward and readable layout resources. Provides some complex and unique methods for placing Views on the screen without the use of two or more ViewGroups in combination. It has a small performance drawback, but that is insignificant if we take in consideration how fast the mobile device hardware and market grows. I will definitely go with ConstraintLayout if I start a new app from scratch and I encourage you too… (wink)

By the way, if some of you faced some illogical designs provided in PhotoShop, its not a big deal anymore. Just switch on the guidelines in the image editor app, and create a ConstraintLayout with the same Guidline-s included, and place everything constrained to them. (wink)