Mobile Application Development
Topic: Tutorial on Android Constraint Layout
Prepared by Mr. Muhammad Nabeel
Android Constraint Layout
The ConstraintLayout is a powerful new class. It allows us to lay out child views using
‘constraints’ to define position based relationships between different views found in our layout.
The aim of the ConstraintLayout is to help reduce the number of nested views, which will
improve the performance of our layout files. The layout class also makes it easier for us to
define layouts than when using a RelativeLayout as we can now anchor any side of a view with
any side of another, rather than having to place a whole view to any side of another.
For example, the attributes of a relative layout allow us to position a view using:
layout_toRightOf
layout_toLeftOf
layout_toTopOf
layout_toBottomOf
However, the ConstraintLayout features several more 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.
that’s a lot of attributes, right? These all give us a great amount of control over the positioning
of our views within the ConstraintLayout, much more so than that of the RelativeLayout.
Examples
<?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:id="@+id/constraintLayout"
<!-- Other attributes -->
>
<ImageView
android:id="@+id/image_shot"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
<!-- Other attributes --> />
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/white"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
<!-- Other attributes --> />
<TextView
android:id="@+id/text_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintEnd_toStartOf="@+id/imageView"
app:layout_constraintStart_toStartOf="@+id/constraintLayout"
tools:text="Japan"
<!-- Other attributes --> />
<TextView
android:id="@+id/text_like_count"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
tools:text="1,287"
<!-- Other attributes --> />
<ImageView
android:id="@+id/imageView"
android:src="@drawable/ic_heart_accent_accent_24dp"
app:layout_constraintBottom_toBottomOf="@+id/text_like_count"
app:layout_constraintEnd_toStartOf="@+id/text_like_count"
app:layout_constraintTop_toTopOf="@+id/text_like_count"
<!-- Other attributes --> />
</android.support.constraint.ConstraintLayout>
Practice Question To Do
Design A Calculator Screen having basic arithmetic functions (+ , - , * , / , %)
