Fun with Constraint Layout

4 min readMay 14, 2018

In this article I’ll show you and explain how to create these fun views using constraint layout, let’s get started!!

Constraint layout are fun if you learn to handled it!

What is Constraint Layout?

The Constraint Layouts were created to simplify the creation of complex layouts in Android by making it possible to build most of your Views with almost only one single structure.

First layout

In this example I’ll show how to create this view step by step. Which components are we going to need? Just 3 components:

EditText

TextView

Button

In those examples, I would like to suggest you the creation of every view with constraint without Android Studio layout editor and write the XML step by step. This way is more practical to see how every component works and it’s behavior.

In the first layout we see the different components inside the Constraint Layout and how it works:

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/secondFieldEditText"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintEnd_toStartOf="parent"

The first property works like the “android:layout_alignParentTop” of Relative Layout

<--RelativeLayout-->
android:layout_alignParentTop="true"<--ConstraintsLayout-->
app:layout_constraintTop_toTopOf="parent"

The second property works like the “android:layout_above” of Relative Layout

<--RelativeLayout-->
android:layout_above="@id/view"<--ConstraintsLayout-->
app:layout_constraintBottom_toTopOf="@+id/view"

The third property is part of the new feature provided for the Constraints Layout: the chains styles:

<--ConstraintsLayout-->
app:layout_constraintVertical_chainStyle=”spread_inside”

An example of how those properties work:

The default chain_style is SPREAD or the chain_spread

Different chain styles: spread, spread inside and packed.

The last property works like the “android:layout_toLeftOf” of Relative Layout

<--RelativeLayout-->
android:layout_toLeftOf="@id/view"<--ConstraintsLayout-->
app:layout_constraintEnd_toStartOf="parent"

This property doesn’t affect the current view because there’s no other view beside the actual view, so you can delete it if you want.

The next component has the followings sentences

<--ConstraintsLayout-->
app:layout_constraintVertical_chainStyle="spread_inside"    app:layout_constraintTop_toBottomOf="@+id/firstFieldEditText"    app:layout_constraintBottom_toTopOf="@id/firstButton"    app:layout_constraintEnd_toStartOf="parent"<--RelativeLayout-->
android:layout_above="@id/view"
android:layout_below="@id/view"
android:layout_toLeftOf="@id/view"

on RelativeLayout you don’t adapt the views according the space have left, with the chain styles you got this and it’s a powerful tool for your views.

Also an important point, the parents on ConstraintsLayout has reference to the layout_alignParent* attributes of te RelativeLayout.

<--ConstraintsLayout-->
app:layout_constraintHorizontal_chainStyle="spread_inside"    app:layout_constraintVertical_chainStyle="spread_inside"    app:layout_constraintStart_toStartOf="parent"    app:layout_constraintTop_toBottomOf="@+id/secondFieldEditText"    app:layout_constraintBottom_toTopOf="@+id/firstTextView"    app:layout_constraintEnd_toStartOf="@+id/secondButton"<--RelativeLayout-->
android:layout_alignParentLeft="true"
android:layout_below="@id/view"
android:layout_above="@id/view"
android:layout_toLeftOf="@id/view"

On this first view we can see the differences between RelativeLayout and ConstraintsLayout, so in this way you can start thinking that the ConstraintsLayout is a potentiated RelaviteLayout (and it is, by the way)

<--ConstraintsLayout-->
app:layout_constraintHorizontal_chainStyle="spread_inside"    app:layout_constraintVertical_chainStyle="spread_inside"    app:layout_constraintEnd_toEndOf="parent"    app:layout_constraintBottom_toTopOf="@+id/firstTextView"    app:layout_constraintStart_toEndOf="@+id/firstButton"<--RelativeLayout-->
android:layout_alignParentLeft="true"
android:layout_below="@id/view"
android:layout_above="@id/view"
android:layout_toLeftOf="@id/view"

When you get this view finished you would have a little better concept about the ConstraintsLayout

<--ConstraintsLayout-->
app:layout_constraintVertical_chainStyle="spread_inside"     app:layout_constraintTop_toTopOf="@+id/secondButton"    app:layout_constraintBottom_toTopOf="@+id/thirdButton"<--RelativeLayout-->
android:layout_alignParentTop="true"
android:layout_above="@id/view"

And the last

<--ConstraintsLayout-->
app:layout_constraintVertical_chainStyle="spread_inside"    app:layout_constraintBottom_toBottomOf="parent"<--RelativeLayout-->
android:layout_alignParentBottom="true"

We have finished the first layout. The following views we are going to create are just to have a reference of what we could build using ConstraintLayout.

I really recommend this posts about the ConstraintLayout and have a better understanding:

Now I’ll share with you the remaining layouts with their XML and show you the final result. I hope you like the following mocks of every view.

Second layout

Third Layout

Fourth Layout

Fifth Layout

Sixth Layout

Seventh Layout

Eighth Layout

In conclusion, the constraint layout are a very powerful tool to create all kind of view for Android, I hope this mocks help to you to understand his function and use this views if you want, I really enjoy to make this article, was fun :D

I leave you the GitHub repository showing all the views implemented

https://github.com/nickand/funwithconstraints

See you in the next post!