ConstraintLayout 2.0.2 performance
All you know ConstraintLayout, it was created to make developer’s life easier in writing view’s layouts. Generally you can replace your LinearLayout, FrameLayout and RelativeLayout with ConstraintLayout and get the same UI result. Jetpack compose is still in alpa version, and sometimes you have to support your legacy code.
I use ConstraintLayout quite often, and mostly prefer to use it when it is necessary to combine 5 or more views. For me It’s easier to develop and modify. But what about performance? The question of preferable choice for the best performance leads to small holy wars among developers.
There are other reports about constraint layout’s performance (first, second). After reading these articles I found several questions which were interesting for me. And recently google released a stable version of constraint layout 2.0.0 — so we can make tests! But let’s do it on the last version 2.0.2.
Main questions:
- Constraint 2.0 — does it have better performance than 1.1.3 version?
- Complex UI — let’s take real life examples and check, what is better to use: ConstraintLayout or combination of LinearLayout + FrameLayout + RelativeLayout (further just linear)?
- Do results have the same trend across different devices? The most obvious answer is yes, but I want to be sure that the Api version doesn’t affect on the results of the experiments.
Test conditions
As a basis I used Maciej Kozłowski’s project. Added 4 new tests and observed test results on different devices. Full code you can find here.
All tests were performed with Android studio 4.0.1, on MacBook Pro 2018.
Used devices:
- emulator Nexus 4, 23 api
- emulator Pixel 3a, 27 api
- emulator Nexus 5x, 29 api
- Huawei P30, 29 api
Some observations about testing. All measurement numbers are given in nanoseconds.
And second thing: I found that It isn’t correct to measure time of different layouts in one test. For example, first code measures LinearLayout first, then measures ConstraintLayout. Results: linear 586411 ns, constraint 779586 ns. For second code, we have: linear 436600 ns, constraint 948736 ns.
As you can see, there is a big difference in what to measure first. That’s why I measured all layouts separately.
Tested Views
View 4: I took this view from Maciej Kozłowski’s project. And decided to continue numeration.
View 5: This is view, that can represent some item of Recycler’s Adapter.
View 6: Based on View 5. Imagine, that your designer added a picture-background. I just added a drawable background.
View 7: This is an example of fragment’s layout. It has ScrollView, a lot of TextViews, and ImageViews. And this is not a simulated example (except images and texts, of course).
View 8: Contains five View 4. Imagine, that you decided to include already written layouts in your new screen.
Constraint 1.1.3 vs 2.0.2
I ran tests with ConstraintLayout 1.1.3 and ConstraintLayout 2.0.2. Actually, I haven’t noticed any significant performance changes.
Different devices
It was interesting to me, does the API version might affect testing results. In my opinion — not significantly. All results have the same trends.
Just for comparison, the chart below shows measurements for different devices with linear layouts.
Tests with Complex UI
So, main question: does ConstraintLayout show better performance with big layouts. All testing results you can see in the table below. Also I have prepared charts with data from the table, which shows the difference in performance between Constraint and Linear.
As you can see, ConstraintLayout loses on all devices and all views, but on several devices (27 api, view 5 and 6) the difference is not so big.
Summary
I did several tests on several devices and measured performance of ConstraintLayout. Main conclusions:
- Version 2.0.2 has the same performance level relatively to the 1.1.3 version.
- Different devices — ConstraintLayout didn’t show any significant deviations on different devices.
- Complex UI — ConstraintLayout didn’t show better performance compared with the combination of LinearLayout + FrameLayout + RelativeLayout.
I was disappointed with the results. I expected that on large and complex layouts ConstraintLayout will show better performance. However, for me ConstraintLayout is still good tool to write complex UI — it has flat structure and therefore it is easier to change layout.