Introduction to ConstraintLayout

#AskMeAnything
Introduction to ConstraintLayout

Senior Android Developer
Omar Albelbaisy
Bio
Omar got his bachelor’s degree in Computer Science
from IUG university in 2014 and has been working as
an Android developer since that time.
He worked in many organizations and companies as
well as a freelancer developer.
He earned the Top Rated badge on Upwork freelancing
platform in 2017.
He also worked as an Android Trainer in many training
centers and colleges.
Omar is currently working as a Content Developer at
Coded and a Mentor at Udacity.

Introduction
© 2019 Udacity. All rights reserved.
❖ The activity is one of the main component of Android
applications.
❖ The Activity class takes care of creating a window for you
in which you can place your user interface.

Introduction
❖ Android user interface consist of hierarchy of Views and ViewGroups.

Introduction
❖ Basically, everything you see on screen is a view!
❖ View is the base class for
➢ Widgets, which are used to create interactive UI components like Buttons,
TextViews, ImageView etc.
➢ ViewGroups which are used to contain other Views and ViewGroups!
❖ Android layouts is a special type of ViewGroups which are used to
organize and specify how views aligned and structured on the screen.

Introduction
❖ Android provides several layouts that are different in how they align and
manage their children on the screen.
➢ e.x. FrameLayout, LinearLayout, RelativeLayout, and so on.
❖ In Feb, 2017 Android team released the first version of a new layout
under Support Library and they called it ConstraintLayout.

Introduction
❖ ConstraintLayout allows you to create complex layouts easily, avoiding
deep nested hierarchies and providing many powerful features for
designing UIs.
❖ ConstraintLayout uses a flexible constraints system to determine how to
align and structure the views on the screen.

Introduction
❖ It's similar to RelativeLayout in that all views are laid out according to
relationships between sibling views and the parent layout, but it's more
flexible than RelativeLayout and easier to use with Android Studio.
❖ All the power of ConstraintLayout is available directly from the Layout
Editor's visual tools, So you can build your layout with ConstraintLayout
entirely by drag-and-dropping instead of editing the XML.

Introduction

Getting Started
❖ To use ConstraintLayout in your Android project you have to download
ConstraintLayout for Android and Solver for ConstraintLayout from the
SDK Manager.
❖ Then you need to add ConstraintLayout dependency to build.gradle in
the app module and sync gradle to download needed files.
❖ Next step is to convert your root view to ConstraintLayout which is the
default case in the newer versions of Android studio.

Let’s start .. Drag & Drop !

Relative Position
❖ Widgets can be aligned relative to parent or siblings like RelativeLayout!
❖ 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
❖ The general concept is to constrain a given side of a widget to another
side of any other widget or parent (In the same Axis).
❖ Margins can be added between constrained widgets.

Relative Position
A A B
C

Relative Position
A A
B B
24
A B

Centering positioning and bias control
❖ A useful aspect of ConstraintLayout is in how it deals with "impossible"
constraints.
❖ Unless the View has the same exact size as the distance between two
opposite constraints, both constraints cannot be satisfied at the same
time (both sides cannot be where we want them to be).
❖ What happens in this case is that the constraints act like opposite forces
pulling the widget apart equally, such that the widget will end up being
centered.

A

❖ The default when encountering opposite constraints is to center the
widget; but you can tweak the positioning to favor one side over
another using the bias attributes.

Circular positioning
❖ You can constrain a widget center relative to another widget center, at
an angle and a distance.
❖ This allows you to position a widget on a circle!

Circular positioning

Visibility behavior
❖ GONE widgets, as usual, are not going to be displayed and are not part
of the layout itself.
❖ But in terms of the layout computations, GONE widgets are still part of
it, with an important distinction:
➢ For the layout pass, their dimension will be considered as zero
(basically, they will be resolved to a point)
➢ If they have constraints to other widgets they will still be respected, but
any margins will be as if equals to zero

Visibility behavior
A B B

Dimensions constraints
❖ You can define minimum and maximum sizes for the ConstraintLayout
itself but those minimum and maximum dimensions will be used by
ConstraintLayout when its dimensions are set to WRAP_CONTENT.
❖ The dimension of the widgets can be specified by setting the
android:layout_width and android:layout_height attributes in 3 different
ways!

➔ Using a specific dimension (either a literal value such as 123dp or a
dimension reference).
➔ Using WRAP_CONTENT, which will ask the widget to compute its own
size based on it’s content.
➔ Using 0dp, which is the equivalent of "MATCH_CONSTRAINT".

A
A
AAAAAAAAA

Important: MATCH_PARENT is not recommended for
widgets contained in a ConstraintLayout! Similar behavior
can be defined by using MATCH_CONSTRAINT with the
corresponding left/right or top/bottom constraints being
set to "parent".

Important: If a dimension is set to WRAP_CONTENT you
have an option to keep enforcing constraints to limit the
resulting dimension by setting layout_constrainedWidth /
layout_constrainedHeight to true.

Important: When a dimension is set to
MATCH_CONSTRAINT, the default behavior is to have the
resulting size take all the available space but you can
change this behavior by setting minimum/maximum size
for the dimension using. (e.g. layout_constraintWidth_min)

Percent dimension
❖ The dimension should be set to MATCH_CONSTRAINT (0dp)
❖ You can set dimension to be percent of the space between the two
opposite constraints.
❖ To use percent, you need to set the following:
➢ layout_constraintWidth_default="percent"
➢ layout_constraintWidth_percent="(value between 0 to 1)"

Aspect Ratio Support
❖ You can define one dimension of a widget as a ratio of the other one.
❖ In order to do that, you need to have at least one constrained
dimension be set to 0dp (i.e., MATCH_CONSTRAINT) and set the
attribute layout_constraintDimensionRatio to a given ratio.
❖ The ratio can be expressed either as a float value, representing a ratio
between width and height or a ratio in the form "width:height"

Aspect Ratio Support
❖ If both dimensions are set to MATCH_CONSTRAINT you can constrain
specific side based on the dimensions of another by pre append W," or
H, to constrain the width or height respectively.

Chains
❖ Chains provide group-like behavior in a single axis (horizontally or
vertically).
❖ The other axis will be constrained independently.
❖ A set of widgets are considered a chain if they are linked together via a
bi-directional connection.

Chains
A
B
A B

Chains
❖ Chains are controlled by attributes set on the first element of the chain
(the "head" of the chain).
❖ The head is the left-most widget for horizontal chains, and the top-most
widget for vertical chains.
A B C
Chain Head

Chains
❖ If margins are specified on connections, they will be taken in account. In
the case of spread chains, margins will be deducted from the allocated
space.
❖ The behavior of the chain will change according to the specified style
(default is CHAIN_SPREAD).

Chains
Important: In CHAIN_SPREAD mode, if some widgets are
set to MATCH_CONSTRAINT, they will split the available
space.
The attribute layout_constraintHorizontal_weight and
layout_constraintVertical_weight will control how the space
will be distributed among the elements using
MATCH_CONSTRAINT.

Chains
Important: In CHAIN_PACKED mode, the horizontal or
vertical bias attribute of the child will affect the
positioning of the packed elements.

Chains
Important: When using margins on elements in a chain,
the margins are additive.
An item plus its margins are considered together when
calculating, that means the margins will not be contained
by the leftover space.

Chains
Spread Chain A B C
A B CSpread Inside Chain
A B CWeighted Chain
A B CPacked Chain
A B CPacked With Bias

Virtual Helper objects - Guidelines
❖ In addition to the intrinsic capabilities detailed previously, you can also
use special helper objects in ConstraintLayout to help you with your
layout.
❖ Currently, the Guideline object allows you to create Horizontal and
Vertical guidelines which are positioned relative to the ConstraintLayout
container.
❖ Widgets can then be positioned by constraining them to such guidelines.

❖ You can position the guideline within the layout based on either dp units
or percent, relative to the layout's edge.
❖ Guideline will be invisible to app users!

A
%
33%
32

Virtual Helper objects - Barriers
❖ Similar to a guideline, a barrier is an invisible line that you can constrain
views to.
❖ Except a barrier does not define its own position; instead, the barrier
position moves based on the position of views contained within it.
❖ This is useful when you want to constrain a view to the a set of views
rather than to one specific view.

Virtual Helper objects - Barriers
C
A
B
C
A
B

Virtual Helper objects - Groups
❖ With groups, you can logically group together certain views allowing you
easily controls the visibility of them by only changing the visibility of the
group itself.
❖ Widgets are added to the group by adding a comma separated list of
their ids.
❖ A group in ConstraintLayout only contains references to the view ids
and not nesting the views inside a group.
❖ This is useful for things such as error screens or loading.

To recap ..
Let's build a real layout together !

Ask Me Anything.
Q&As

Be in Demand

Introduction to ConstraintLayout

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to ConstraintLayout

Similar to Introduction to ConstraintLayout (20)

Introduction to ConstraintLayout