18 June

ConstraintLayout, or, after all, not so fast...

Recently, while browsing through news from Android world I came across a concept of ConstraintLayout. It is a new layout delivered by Android and Google, supporting Android versions from API 9 on. Digging into possibilities it is to give, I decided to check how new Layout Builder behaves and what is ConstraintLayout like in use.

To use ConstraintLayout you first need to get a yet unstable, AndroidStudio version 2.2 Preview 2. Then, to be able to use a new type of layout, in build.gradle of the created project, add a dependency:

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

At this point, when new Layout is being created, you can freely enter ConstraintLayout as the main component of the view. With the new layout in AndroidStudio 2.2 we are given a new graphics editor that is able to create views in a simple way. When we go to the tab 'Design' of our layout, we will see both the classic view of a layout, and the second view, with dark blue background, clearly showing created view connections:

So what are these connections and how can you create dependencies between views?

ConstraintLayout, a bit like RelativeLayout, allows creating links between the views of the layout. Rules that determine the position and which are characteristic of the new layout are layout_constraintSIDE_toSIDEof, layout_constraintBaseline_toBaselineOf. The new editor for creating layouts, where you can create such dependencies within seconds by dragging, is supposed to be a great advantage. All you need to do is connect the edge of chosen view with the edge of another view, with which you want to limit placed element. You can easily align text to a line by using layout_constraintBaseline_toBaselineOf.

As a result, layout.xml is generated based on the created links, and an example of the element with parameters characteristic for ConstraintLayout you can see below:

<EditText
        	android:layout_width="215dp"
        	android:layout_height="47dp"
        	android:inputType="textPersonName"
        	android:text="Katarzyna"
        	android:ems="10"
        	android:id="@+id/nameEt"
        	app:layout_constraintLeft_toRightOf="@+id/nameTv"
        	android:layout_marginLeft="16dp"
        	android:layout_marginStart="16dp"
        	app:layout_constraintBaseline_toBaselineOf="@+id/nameTv" />

Another novelty is the segment allowing to easily define size and margins of a view. The segment enables smooth switching between sizes any_size, wrap_content and self-defined elements.

Conclusions

ConstraintLayout objective is to enable efficient creation of dependencies through the editor that is able to search links automatically, to reduce nesting views and to facilitate achieving desired results without creating complex combinations in layouts. It is worth mentioning that the new layout is fully compatible with existing types of layouts.

Unfortunately, as it turns out, not everything works as planned. The editor itself can sometimes make a mess of our views in a preview, which makes the layout not transparent. It may also be hard to create a view using only the editor, without creating an .xml file on our own. Worse, when trying to create a simple layout with a few dependencies, we failed to achieve the desired effect. It seems that there is still some work to do to make using ConstraintLayout really efficient.