To Constraint, Or Not To Constraint?

Creating a great UI experience is a main goal for us as developers. In order to do so, first step is to understand how does the system work, so we can better coordinate with it, benefit from its advantages, and avoid its flaws.

Previous posts discussed the process that takes place under the hood when Android turns a View we write in code into pixels we can actually see on screen. We overview the different rendering phases, and focussed on the process of laying our Views before drawing them. We introduced some situations we should notice when writing our layout, so that potential issues won’t arise.

So, when approaching to plan and write a new layout for our app, the main question that is still hangs over our head is-

Which layout to choose?

We can define 2 groups of choices:

• Simple layouts, like: LinearLayout or FrameLayout. If we choose one of these, then, for complex layouts we would nest these . Nesting would cause deep view hierarchy which, as we know, harms performance.
• Complex layouts, like: RelativeLayout or GridLayout. These might be more flat and more performant in some cases. But on the other hand they are harder to use, read and maintain. Moreover, placing at top of view hierarchy can also cause performance issues, as we previously saw

**To better understand why those may hurt your app performance, check out previous short posts (links above) about the layout process and double layout taxation.

Now, one of the most exciting news for us, Android developers, is a brand new layout, named ConstraintLayout, which attempt to resolve these issues, by being:

1. Performance oriented

• Reduces view hierarchy — since all views attempt to be on same hierarchy level.
• Improve measure and layout process — since usually there’s only a single layout traversal.
• Best practice is to use as top level, without nesting other layouts.

2. User friendly

• Very expressive in layout composing terms.
• Comes with a new smart layout editor, which makes the composing easier.

Concepts before beginning:

• The idea is very similar to RelativeLayout : positioning a view relative to other layout elements. So we can feel quite comfortable with the idea, since it’s both familiar and intuitive. Yet, this tool is much more expressive, powerful and performant.
• These layout elements a view can relate to, might be either another view, the parent layout, or some “imaginary landmark” within the layout (more on that later :) ).
• ConstraintLayout is supported from api 9
• It is still on alpha, but honestly quite stable and cool, so it is recommended to play around with.
• The new layout editor is available only on Android Studio 2.2 Preview and above, on the canary channel.

Quick notes about the layout editor:

• ConstraintLayout oriented : we’re told it was build together with the ConstraintLayout development team.
• Standalone feature: it supports all other layouts as well
• Improved from previous editor : has more features like better with custom views (use View.isInEditMode()), editing resources and more…

Pre-requisites:

1. Android Studio 2.2 Preview and up
2. Android Support Repository (version 32+)
3. On Android Studio: Tools → Android → SDK Manager → SDK Tools tab → Select Android Support Repository → OK.
4. Add the library on your build.gradle file:

dependencies {
compile ‘com.android.support.constraint:constraint-layout:1.0.0-alpha3’
}

Well,

We know why can ConstraintLayout be beneficial for us, and understand its main concepts.

Next post we’ll start to play around with ConstraintLayout together with the new layout editor features!

In the meantime join our awesome Android Academy TLV community on our Facebook group and Meetup.