Lesson 7:

ConstraintLayout
and Data Binding

This work is licensed under the

Android Development with Kotlin Apache 2 license. 1
v1.0
About this lesson
Lesson 5: Layouts
● Layouts in Android
● ConstraintLayout
● Additional topics for ConstraintLayout
● Data binding
● Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 2
Layouts in Android

This work is licensed under the

Android Development with Kotlin Apache 2 license. 3
Android devices
● Android devices come in
many different form
factors.
● More and more pixels per
inch are being packed into
device screens.
● Developers need the
ability to specify layout
dimensions that are
consistent across devices.
This work is licensed under the
Android Development with Kotlin Apache 2 license. 4
Density-independent pixels (dp)
Use dp when specifying sizes in your layout, such as the width or height
of views.
● Density-independent pixels
(dp) take screen density into

Hell
80d
account. p

● Android views are measured in

density-independent pixels. o 160d
p
● dp = (width in pixels * 160)
screen density

This work is licensed under the

Android Development with Kotlin Apache 2 license. 5
Screen-density buckets
Density qualifier Description DPI estimate

ldpi (mostly unused) Low density ~120dpi

mdpi (baseline Medium density ~160dpi

density)
hdpi High density ~240dpi

xhdpi Extra-high density ~320dpi

xxhdpi Extra-extra-high density ~480dpi

xxxhdpi Extra-extra-extra-high ~640dpi

density
This work is licensed under the
Android Development with Kotlin Apache 2 license. 6
Android View rendering cycle
Measure

Layout

Draw

This work is licensed under the

Android Development with Kotlin Apache 2 license. 7
Drawing region

What we see:

How it's drawn:

This work is licensed under the

Android Development with Kotlin Apache 2 license. 8
View margins and padding

View with margin View with margin and

padding

View View

This work is licensed under the

Android Development with Kotlin Apache 2 license. 9
ConstraintLayout

This work is licensed under the

Android Development with Kotlin Apache 2 license. 10
Deeply nested layouts are
costly
● Deeply nested ViewGroups require more computation
● Views may be measured multiple times
● Can cause UI slowdown and lack of responsiveness

Use ConstraintLayout to avoid some of these issues!

This work is licensed under the

Android Development with Kotlin Apache 2 license. 11
What is ConstraintLayout?

● Recommended default layout for Android

● Solves costly issue of too many nested layouts, while
allowing complex behavior
● Position and size views within it using a set of
constraints

This work is licensed under the

Android Development with Kotlin Apache 2 license. 12
What is a constraint?

A restriction or limitation on the

properties of a View that the
layout attempts to respect

This work is licensed under the

Android Development with Kotlin Apache 2 license. 13
Relative positioning constraints
Can set up a constraint relative to the parent container
Format:
layout_constraint<SourceConstraint>_to<TargetConstraint>Of

Example attributes on a TextView:

app:layout_constraintTop_toTopOf="parent
"
app:layout_constraintLeft_toLeftOf="pare
nt"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 14
Relative positioning constraints

Top

Hello!
Baseline
Bottom

This work is licensed under the

Android Development with Kotlin Apache 2 license. 15
Relative positioning constraints

Left Hello! Right

Start End

This work is licensed under the

Android Development with Kotlin Apache 2 license. 16
 Simple ConstraintLayout
example
<androidx.constraintlayout.widget.ConstraintLay
out
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
...

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"
This work is licensed under the
app:layout_constraintTop_toTopOf="parent"
Android Development with Kotlin /> 2 license.
Apache 17
Layout Editor in Android Studio
You can click and drag to add constraints to a View.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 18
Constraint Widget in Layout
Editor
Fixed

Wrap content

Match constraints

This work is licensed under the

Android Development with Kotlin Apache 2 license. 19
Wrap content for width and
height

This work is licensed under the

Android Development with Kotlin Apache 2 license. 20
Wrap content for width, fixed
height

This work is licensed under the

Android Development with Kotlin Apache 2 license. 21
Center a view horizontally

This work is licensed under the

Android Development with Kotlin Apache 2 license. 22
Use match_constraint
Can’t use match_parent on a child view, use match_constraint
instead

This work is licensed under the

Android Development with Kotlin Apache 2 license. 23
Chains

● Let you position views in relation to each other

● Can be linked horizontally or vertically
● Provide much of LinearLayout functionality

This work is licensed under the

Android Development with Kotlin Apache 2 license. 24
Create a Chain in Layout Editor

1. Select the objects you want to

be in the chain.
2. Right-click and select Chains.
3. Create a horizontal or vertical
chain.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 25
Chain styles
Adjust space between views with these different chain styles.

Spread Chain

Spread Inside Chain

Weighted Chain

Packed Chain

This work is licensed under the

Android Development with Kotlin Apache 2 license. 26
Additional topics for
ConstraintLayout

This work is licensed under the

Android Development with Kotlin Apache 2 license. 27
Guidelines

● Let you position multiple views relative to a single

guide
● Can be vertical or horizontal
● Allow for greater collaboration with design/UX teams
● Aren't drawn on the device

This work is licensed under the

Android Development with Kotlin Apache 2 license. 28
Guidelines in Android Studio

This work is licensed under the

Android Development with Kotlin Apache 2 license. 29
Example Guideline
<ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/start_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<TextView ...

app:layout_constraintStart_toEndOf="@id/start_guideline" />
</ConstraintLayout>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 30
Creating Guidelines

● layout_constraintGuide_begin
● layout_constraintGuide_end
● layout_constraintGuide_percent

This work is licensed under the

Android Development with Kotlin Apache 2 license. 31
Groups

● Control the visibility of a set of

widgets
● Group visibility can be toggled in
code

This work is licensed under the

Android Development with Kotlin Apache 2 license. 32
Example group

<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

app:constraint_referenced_ids="locationLabel,locationDetails"
/>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 33
Groups app code
override fun onClick(v: View?) {
if (group.visibility == View.GONE) {
group.visibility = View.VISIBLE
button.setText(R.string.hide_details)
} else {
group.visibility = View.GONE
button.setText(R.string.show_details)
}

}
This work is licensed under the
Android Development with Kotlin Apache 2 license. 34
Data binding

This work is licensed under the

Android Development with Kotlin Apache 2 license. 35
Current approach:
findViewById()
Traverses the View hierarchy each time
MainActivity.kt <ConstraintLayout … >
activity_main.xml
val name = <TextView
findViewById(...) findViewById
val age = android:id="@+id/name"/>
findViewById(...) findViewById <TextView
val loc =
findViewById(...) android:id="@+id/age"/>
findViewById
<TextView
name.text = …
age.text = … android:id="@+id/loc"/>
loc.text = … </ConstraintLayout>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 36
Use data binding instead
Bind UI components in your layouts to data sources in your app.
<layout>
MainActivity.kt <ConstraintLayout … >
activity_main.xml
<TextView
Val initialize
binding:ActivityMainBinding binding android:id="@+id/name"/>
<TextView
binding.name.text = …
binding.age.text = … android:id="@+id/age"/>
binding.loc.text = … <TextView

android:id="@+id/loc"/>
</ConstraintLayout>
</layout>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 37
Modify build.gradle file

android {
...
buildFeatures {
dataBinding true
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 38
Add layout tag

<layout>
<androidx.constraintlayout.widget.ConstraintLayout>
<TextView ... android:id="@+id/username" />
<EditText ... android:id="@+id/password" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 39
Layout inflation with data
binding
Replace this
setContentView(R.layout.activity_main)

with this
val binding: ActivityMainBinding =
DataBindingUtil.setContentView(
this, R.layout.activity_main)

binding.username = "Melissa"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 40
Data binding layout variables
<layout>
<data>
<variable name="name" type="String"/>
</data>
<androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="@+id/textView"
android:text="@{name}" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
In MainActivity.kt:
binding.name = "John"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 41
Data binding layout expressions
<layout>
<data>
<variable name="name" type="String"/>
</data>

<androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="@+id/textView"
android:text="@{name.toUpperCase()}" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 42
 Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 43