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:
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.
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.
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.
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.
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.
In my last post I had some thoughts about a few problems that I encountered, so let’s overview these first!
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:
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.
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… ;)
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. ;)