ConstraintLayout, or not so fast, after all…

ConstraintLayout, or not so fast, after all…
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.

This article is about an early version of Android Studio 2.2 Preview and ConstraintLayout 1.0.0-alpha2.  If you want to know more about the features and benefits the current version of ConstraintLayout (2021) has to offer, read this piece

Preparation to ConstraintLayout usage

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 a 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 a dark blue background, clearly showing created view connections:

ConstraintLayout editor

What are view connections and how can you create dependencies between views?

ConstraintLayout, a bit like RelativeLayout, allows us to create 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.

Android Studio editor - connecting views

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.

Size segment in Android Studio

What possibilities does ConstraintLayout give us?

ConstraintLayout objective is to enable efficient creation of dependencies through the editor that is able to search links automatically, reduce nesting views, and 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 a .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.

Learn more

5 Reasons Why You Should Build the UI in ConstraintLayout

ConstraintLayout is a popular solution that Android developers use every day. And not without a good reason. If you’re at the beginning of your journey as a software engineer, get familiar with the most important features this layout can offer. It will help you understand the way it works, and Android app development will become easier.
Read more

How to Implement Feature Flags and Gain More Control over Your App?

Every person with software development experience can share a few stories about incorrectly working features. We build our apps out of small pieces, introduce advanced architecture patterns, and yet sometimes one of the elements fails, causing bugs or even system failures. In such cases, feature toggling can save the day! Find out how to implement feature flags, and make your app more stable.
Read more

Project estimation

Check out how we use our knowledge in practice, and make your project with us.

Why choose us?

Logo Mobile Trends Awards

Mobile Trends Awards 2017

Nomination in
M-COMMERCE category

17

client reviews

Clutch logo
Logo Legalni bukmacherzy

Legal Bookmakers Award 2019

Best Mobile App

60+

projects in portfolio