Part 1: A Guide to Android Constraint Layout

5 min readDec 10, 2018

A step by step guide to android constraint layout,

This guide is divided into two parts Part 1 (you are reading now) and Part 2 . Let’s start,

Image credit: https://cdn.hipwallpaper.com/i/56/70/EeGvH3.jpg

Why we use layouts in android?

Actually we use layouts in android to organize the child views in a specific way as per design requirement. There is a variation of devices for which we have to make our views adjustable and easy to look on different screens with different sizes, different languages and different orientations portrait/landscape.

There are approximately 5400 different variation of devices as 90 common screen sizes, 30 languages and 2 orientations portrait/landscape

Layout Categories:

Categorically, there are 2 types of layouts in android

Simple layouts: LinearLayout, FrameLayout, TableLayout

Complex layouts: RelativeLayout, GridLayout

Layout Issues:

Simple layouts lead to nesting and nesting leads to performance issues

Complex layouts can be hard to use or maintain

Here comes to constraint layout to resolve performance issues with no nesting and easy to maintain with extended layout editor

Constraint Layout:

Constraint layout was first announced in Google I/O 2016, It’s a small, unbundled library, compatible with API level 9 ( 99.9 % of devices out there), it’s designed to reduce nesting of child views and it’s designed to be used in android studio with great UI Builder. UI Builder provides two way editing(XML / UI) with immediate feedback(preview).

How constraints resolve in constraint layout?

we can divide this constraints resolution in 4 layers as below,

1- we use UI Builder and other tools(i.e, inference) to apply constraints on a view

2- There are 4 types of constraints generated for each view(i.e, Parent constraints, Horizontal constraints, Vertical constraints, Size constraints)

3- About 16 linear equations are generated for each view( 4 for each constraint type)

4- These equations are solved with Cassowary Equation Solver

If you want to get some more insights of internal mechanics of constraint Layout, do watch this talk by Dave Smith.

Add Constraint layout to your project:

Follow official instructions here to add constraint layout to your project

Types of constraints:

There are currently various types of constraints that you can use:

Relative positioning
Margins
Centering positioning
Circular positioning
Dimension constraints
Chains
Virtual Helpers objects

Relative positioning:

you can position a given widget relative to another one.

You can constrain a widget on the horizontal and vertical axis

Horizontal Axis: left, right, start and end sides
Vertical Axis: top, bottom sides and text baseline

you can constrain a given side of a widget to another side of any other widget

Position button B to the right of button A

<Button android:id="@+id/buttonA" ... />
         <Button android:id="@+id/buttonB" ...
          app:layout_constraintLeft_toRightOf="@+id/buttonA"/>

Margins:

If side margins are set, they will be applied to the corresponding constraints(if they exist), enforcing the margin as a space between the target(the side of view to which source view is being constrained)and the source side(the side of view being constrained)

Gone Margin:

When a position constraint target’s visibility is View.GONE, you can also indicate a different margin value to be used using the following attributes:

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft

goneMarginTop and goneMarginStart behaviour

layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

Centering Positioning:

There are 4 different options of centering positioning

Centering in the parent

You can center a view in the parent

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Centering to the middle of a sibling

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Centering to the edge of a sibling

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Centering positioning with Bias

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

Circular positioning:

You can constrain a widget center relative to another widget center, at an angle and a distance to position a widget on a circle. The attributes used for this positioning are as follows,

layout_constraintCircle : references another widget id

layout_constraintCircleRadius : the distance to the other widget center

layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />

To learn more about Dimension constraints and Chains, Head over to Part 2 of this article, Happy Learning!

Reference:
https://developer.android.com/reference/android/support/constraint/ConstraintLayout