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
