logo

Google announced new Android layout called “ConstraintLayout” in IO 2016. Currently it is in Alpha release. Good news about ConstraintLayout is it is compatible with API level 9 :).

Why ConstraintLayout?

In Android, while writing XMLs due to limitations of various layouts, we ended up with writing deep nested layouts. But it is well documented that deep nested layouts are very expensive in terms of measurement and layout passes.

So, Google encourage us to have single topmost child in most of cases with ConstraintLayout. So, it is best practice to not nest any layout inside ConstraintLayout. Since we need not add child layout within ConstraintLayout, it reduces the exponential rise in measurements and double layout passes and so, improves overall performance of app.

How it eliminates nesting layouts?

Unlike RelativeLayout, ConstraintLayout have bunch of attributes called “constraints” to better control the positioning of child views within layout.

RelativeLayout have attributes

  • layout_toRightOf
  • layout_toLeftOf
  • layout_toStartOf
  • layout_toEndOf

ConstraintLayout have attributes:

  • layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
  • layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
  • layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
  • layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
  • layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
  • layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
  • layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
  • layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
  • layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
  • layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
  • layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
  • layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
  • If desired, attributes supporting start and end are also available in place of left and right alignment.

 

New Layout Editor with ConstraintLayout

So many attributes in ConstraintLayout! Although you can edit a ConstraintLayout in XML, you never have to. With Android Studio 2.2 preview, you’ll have new layout editor specifically build for ConstraintLayout. ConstraintLayout was build from ground up alongside new layout editor that makes it easy to design an Android UI. Simply by drag and drop, you can add the view to ConstraintLayout and create constraints to define the relationships of child.


 

Adding ConstraintLayout Gradle Dependency

New Layout editor comes from Android Studio 2.2 preview 2. While ConstraintLayout is supported right from API level 9 :).

In starter project, dependency is already included in app/build.gradle.

If you intend to use ConstraintLayout in your project, add following compile dependency:

dependencies {
...// other dependencies
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha3'
}

as of writing this post, alpha3 is latest test update

Add in activity layout XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     
android:layout_width="match_parent"     
android:layout_height="match_parent"
</android.support.constraint.ConstraintLayout>

 

Type of Constraints

  • Resize Handle: Used to resize the widget by hold and dragging it’s corners with square icon.

resize-handle

  • Side Handle: Use to specify the location of the widget; they are round circles on the side of each widget.

side-handle

  • Baseline Handle: Use to align two baselines of text in your widgets.

baseline-handle

  • Bias: Specifies which direction you want your widget to have bias towards. You can specify vertical or horizontal bias.

bias-handle
 

Widget Sizing

In Properties window, you can view symbols depicting the image size of the widget. You can also edit margin. Simply toggle between symbols to change sizing of widget.

widget-sizing

  • Any Size – Similar to match_parent widget-any-size
  • Wrap Content – widget-wrap-content
  • Fixed Size – widget-fixed-size

 

Autoconnect

Autoconnect automatically creates the constraints for the new widget based on the position where you dropped the widget. It can be enable/disable by pressing  autoconnect-button  autoconnect-enabled

auto-connect

Checkout the XML code for above autoconnect:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/constraintLayout3">

    <EditText android:layout_width="217dp"                  android:layout_height="44dp"                  android:inputType="textPersonName"                  android:text="Name"                  android:ems="10"                  android:id="@+id/editText8"         app:layout_constraintLeft_toLeftOf="@+id/constraintLayout3"         app:layout_constraintTop_toTopOf="@+id/constraintLayout3"         android:layout_marginTop="16dp"         app:layout_constraintRight_toRightOf="@+id/constraintLayout3" />

     <Button android:text="Button"         android:layout_width="88dp"                  android:layout_height="48dp"                  android:id="@+id/button8"          app:layout_constraintLeft_toLeftOf="@+id/constraintLayout3"         app:layout_constraintTop_toBottomOf="@+id/editText8"         android:layout_marginTop="16dp"         app:layout_constraintRight_toRightOf="@+id/constraintLayout3" />
</android.support.constraint.ConstraintLayout>

As you add EditText, it creates 3 constraints for EditText

  • app:layout_constraintLeft_toLeftOf="@+id/constraintLayout3" – align left of EditText to left of parent constraint layout
  • app:layout_constraintTop_toTopOf="@+id/constraintLayout3" – align top of EditText to top of parent constraint layout
  • app:layout_constraintRight_toRightOf="@+id/constraintLayout3" – align right of EditText to right of parent constraint layout

As you add Button, it creates 3 constraints for Button

  • app:layout_constraintLeft_toLeftOf="@+id/constraintLayout3" – align left of Button to left of parent constraint layout
  • app:layout_constraintTop_toBottomOf="@+id/editText8" – align top of Button to bottom of EditText
  • app:layout_constraintRight_toRightOf="@+id/constraintLayout3" – align right of Button to right of parent constraint layout

 

Inference

Inference creates constraints between all different widgets in your layout, it acts like Autoconnect, but instead it works for the entire layout and not just the widget being edited.

To see Inference in action press lightbulb icon inference

 

inference

SUMMARY

Why ConstraintLayout? – Because it eliminates deep layout hierarchies, so, improving performance

How it Eliminates Hierarchies? – By giving more flexibility in defining constraints between child views of layout

New Layout Editor – Defining constraints for ConstraintLayout is as easy as drag and drop using New Layout Editor which is supported from Android Studio 2.2 preview.

Types of Constraints – Resize, Side, Baseline & Bias handle for constraints.

Widget Sizing – Widget resizing & margin from properties window

Autoconnect – Creates constraints automatically for added widget based on its position.

Inference – Creates missing constraints for all child views in layout depending on its position.

ConstraintLayout along with new Layout Editor is powerful widget introduced in IO 2016 and is something which was needed in Android.

AUTHOR: Mahavir Jain

Founder @CodeToArt, Leads Android Development at CodeToArt.

No Comments

Leave a Comment

Your email address will not be published.