Do you really like ConstraintLayout? Let’s see …

Introduction

Recently at Google I/O was introduced ConstraintLayout: a new powerful and flexible Android layout that allows you to express complex UI without nesting multiple layouts. Wow! Sounds really great! Let’s take a look a little bit closer but briefly (・_・ヾ

Installation

OK, what should we have? It’s simple. We just need some pan, vegetables, seasoning & fire! ｢(ﾟ<ﾟ)ﾞ??

• Install the latest version of Android Studio 2.2
• Add dependency for the ConstraintLayout from the support library:

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'

Bonus: the ConstraintLayout also has backward compatibility with API 9+

That’s it! We are on the right way!

What does lie behind it?

Imagine the famous RelativeLayout that we like to use when want to get rid of nested childs. Imagined? And now powder it using extra attrs from PercentRelativeLayout (yes, I know that it includes RelativeLayout but generally we use raw RelativeLayout) plus all this stuff flies on the reactive plane.

Also let’s remember some main attrs from layouts described above and write a mapping between corresponding values of ConstraintLayout (please notice and don’t be angry that I omitted all mentions about {start/end} attrs just to be as short as possible). It will help your migration from one layout to another:

• RL: layout_toRightOf=”@id/itemId” ⇆ CL: layout_constraintLeft_toRightOf=”@id/itemId”
• RL: layout_toLeftOf=”@id/itemId” ⇆ CL: layout_constraintRight_toLeftOf=”@id/itemId”
• RL: layout_above=”@id/itemId” ⇆ CL: layout_constraintBottom_toTopOf=”@id/itemId”
• RL: layout_below=”@id/itemId” ⇆ CL: layout_constraintTop_toBottomOf=”@id/itemId”
• RL: layout_alignLeft=”@id/itemId” ⇆ CL: layout_constraintLeft_toLeftOf=”@id/itemId”
• RL: layout_alignRight=”@id/itemId” ⇆ CL: layout_constraintRight_toRightOf=”@id/itemId”
• RL: layout_alignTop=”@id/itemId” ⇆ CL: layout_constraintTop_toTopOf=”@id/itemId”
• RL: layout_alignBottom=”@id/itemId” ⇆ CL: layout_constraintBottom_toBottomOf=”@id/itemId”

to use the attrs below please assign some CLId for your ConstraintLayout and use it as some kinda anchor

• RL: layout_alignParentLeft=”true” ⇆ CL: layout_constraintLeft_toLeftOf=”@id/CLId”
• RL: layout_alignParentRight=”true” ⇆ CL: layout_constraintRight_toRightOf=”@id/CLId”
• RL: layout_alignParentTop=”true” ⇆ CL: layout_constraintTop_toTopOf=”@id/CLId”
• RL: layout_alignParentBottom=”true” ⇆ CL: layout_constraintBottom_toBottomOf=”@id/CLId”
• RL: layout_centerHorizontal=”true” ⇆ CL: layout_constraintLeft_toLeftOf=”@id/CLId” + layout_constraintRight_toRightOf=”@id/CLId” + layout_constraintHorizontal_bias=”0.5”
• RL: layout_centerVertical=”true” ⇆ CL: layout_constraintTop_toTopOf=”@id/CLId” + layout_constraintBottom_toBottomOf=”@id/CLId” + layout_constraintVertical_bias=”0.5”
• RL: layout_centerInParent=”true” ⇆ RL: layout_centerHorizontal=”true” + RL: layout_centerVertical=”true”

you are able to repeat the behaviour of some PercentRelativeLayout’s attrs using layout_constraintVertical_bias & layout_constraintHorizontal_bias of ConstraintLayout. Please play with it by yourself.

Unique attrs

ConstraintLayout also has some unique useful attrs (maybe you will find some other attrs useful but right now there is no DOCs) like the following:

• CL: layout_constraintBaseline_toBaselineOf ⇉ baseline constrain allows you to align the TextView’s baseline to other baselines.

Design/Layout Editor

Editor has a new user interface designer that helps you visually design the layouts in your application. Features like blueprint mode and the new properties panel allow you to quickly edit layouts and widgets.

What’s new?

• Drag-and-drop widgets from the palette to the design surface ...
• Design surface has a blueprint mode to inspect the spacing and arrangement of your app’s layout …
• Properties panel now shows properties for quick widget edits with a full sheet of advanced properties in one click away…
• UI builder can edit menu and system preference files …

What I really love from the list above is blueprint mode. Nice to have it! Thanks.

Does Layout Editor + ConstraintLayout = Love? ♥♥♥

ConstraintLayout is tightly coupled with Android Studio and it was designed to be used in Studio and it can efficiently express your app design.

The point is that Layout Editor tries to do all work without any line of code from us. Generate all constraints, suggest constrains, show all stuff with very beautiful animations. Nice!

I won’t describe all new Editor’s stuff here. See my short list below to understand why Android Studio does all work:

• Auto-connect ⇉ automatically calculates and sets the constraints for you when you add some new widget
• Manual constraint ⇉ add/remove all necessary constrains using mouse
• Inference ⇉ it’s like auto-connect feature but it automatically calculates and sets the constraints for you of all stuff on your screen
• Clear all constrains ⇉ clear all constraints on your screen (-_-)ゞ゛
• Show No constrains ⇉ all constrains are visible/invisible (-_-)ゞ゛
• Default screen margin ⇉ it’s nice to have some visual indicator that you are able to move your widgets only within some region
• …

Please see the demo below to understand what I’m talking about above

Of course you can do all this stuff without blueprint mode to see all you real images and colors

Is it love ♥♥♥? Right now I’m not sure. I understand that it’s only alpha, but let me say some unkind words (with dozen kind words behind it):

• It’s very very slow process and it take a lot of my time to construct smth and see the right result
• I’ve never used Layout Editor to manually drag-and-drop widgets. Every time I just write it directly in XML-file and see the result on the screen. Is it more comfortable right now? I’m not sure.
• It just works incorrectly and there are a lot of cases when preview isn’t updated
• Ok, let’s imagine that everything works fine but if you see XML-file’s code then you will see a bunch of useless code lines that I don’t want to see:

• Also when your layout contains a lot of widgets and you have for instance a MacBook (13") then forget about attempts to understand “what’s going on?”. Why? See

Ok, enough. I’m a little bit picky. The truth is the following: this is really cool feature and you definitely should use it!

Bottom line

Personally IMO I want to continue to work with XML-files directly and create all layouts’ stuff using provided attributes. Sorry but right now such kinda editor it’s not for me due to wasting of time. But it looks really awesome, trust me!

I will use ConstraintLayout because it’s flexible and fast box to place your UI items. But also I don’t want to stop to use other types of layouts like PercentRelativeLayout, FrameLayout and so on and so forth (at least now). It’s your choice. Just think about questions like “how fast do you want to be?”, “how flexible do you want to be?” and then just use that you want and be happy ( ᐛ )و

Bye, bye! Cheers! ( ﾟ▽ﾟ)/