Lesson 5:

Layouts

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
● Displaying lists with RecyclerView
● Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 2
Application running process
1. User clicks to the icon of the app
2. Android will run the app
• Android scans the Manifest file to find the “main” activity
• Android starts the main Activity

3. The app state is changed: stopped/paused 

running
4. Some call back functions are called: onCreate,
onResume Android Development with KotlinThis work is licensed under the
Apache 2 license.
Layouts in Android

This work is licensed under the

Android Development with Kotlin Apache 2 license. 4
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. 5
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. 6
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. 7
Android View rendering cycle
Measure Compute the position and the size of views

Layout Align views based on the rules of the layout

Keep the view hierarchy as simple as possible!

Draw Render the views

This work is licensed under the

Android Development with Kotlin Apache 2 license. 8
Drawing region

What we see:

How it's drawn:

This work is licensed under the

Android Development with Kotlin Apache 2 license. 9
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. 10
ConstraintLayout

This work is licensed under the

Android Development with Kotlin Apache 2 license. 11
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. 12
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. 13
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. 14
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. 15
Relative positioning constraints

Top

Hello!
Baseline
Bottom

This work is licensed under the

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

Left Hello! Right

Start End

This work is licensed under the

Android Development with Kotlin Apache 2 license. 17
 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 18
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. 19
Constraint Widget in Layout
Editor
Fixed

Wrap content

Match constraints

This work is licensed under the

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

This work is licensed under the

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

This work is licensed under the

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

This work is licensed under the

Android Development with Kotlin Apache 2 license. 23
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. 24
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. 25
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. 26
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. 27
Additional topics for
ConstraintLayout

This work is licensed under the

Android Development with Kotlin Apache 2 license. 28
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. 29
Guidelines in Android Studio

This work is licensed under the

Android Development with Kotlin Apache 2 license. 30
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. 31
Creating Guidelines

● layout_constraintGuide_begin
● layout_constraintGuide_end
● layout_constraintGuide_percent

This work is licensed under the

Android Development with Kotlin Apache 2 license. 32
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. 33
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. 34
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. 35
Create layout variant for
landscape
1. Click Orientation in Editor button

2. Choose Create Landscape Variation

3. Layout variant created: activity_main.xml

(land)

4. Edit the layout variant as needed

36

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Create layout variant for
tablet
1. Click Orientation in Layout Editor
2. Choose Create layout x-large Variation
3. Layout variant created: activity_main.xml
(xlarge)
4. Edit the layout variant as needed

37

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Data binding

This work is licensed under the

Android Development with Kotlin Apache 2 license. 38
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. 39
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. 40
Modify build.gradle file

android {
...
buildFeatures {
dataBinding = true
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 41
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. 42
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. 43
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. 44
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. 45
Displaying lists with
ListView

This work is licensed under the

Android Development with Kotlin Apache 2 license. 46
ListView
 ListView in Android is an Adapter View
 It does not know the details, such as type and
content of view it contains
 Need an adapter to provide data

This work is licensed under the

Android Development with Kotlin Apache 2 license. 47
 Listview
Data source Adapter Listview

I need to display a list

I got data for you of songs
I can’t do that Please prepare it as a
list of textview
Let’s me help OK I’ll register you as
List<Songs>
my adapter
How many item do you
have?

Give me the view of

each item, one by one

This work is licensed under the

Android Development with Kotlin Apache 2 license.
ListView
1. Declare a ListView widget in XML
2. Create an Adapter
• ArrayAdapter
• CursorAdapter
• BaseAdapter
• Your adapter (must extend from one of above class)

3. Prepare layout for 1 item in Listview

This work is licensed under the

Android Development with Kotlin Apache 2 license.
ListView
1. Declare ListView in xml

This work is licensed under the

Android Development with Kotlin Apache 2 license.
ListView
2. Create adapter class
3. Set the adapter for the Listview

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Some limitations
1. For the adapter
a. The ViewHolder should be a must
b. The getView function should return a ViewHolder rather
than a View

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Some limitations
1. For the View
a. We may need a more generic one

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Displaying lists with
RecyclerView

This work is licensed under the

Android Development with Kotlin Apache 2 license. 54
RecyclerView

● Widget for displaying lists of data

● "Recycles" (reuses) item views to make scrolling more
performant
● Can specify a list item layout for each item in the
dataset
● Supports animations and transitions

This work is licensed under the

Android Development with Kotlin Apache 2 license. 55
RecyclerView.Adapter

● Supplies data and layouts that the RecyclerView displays

● A custom Adapter extends from RecyclerView.Adapter and
overrides these three functions:
● getItemCount
● onCreateViewHolder
● onBindViewHolder

This work is licensed under the

Android Development with Kotlin Apache 2 license. 56
View recycling in RecyclerView
Boston, If item is scrolled
Massachusetts offscreen, it isn’t
Chicago, Illinois
destroyed. Item is put in
Mountain View, a pool to be recycled.
California
Miami, Florida
Seattle, Washington
Reno, Nevada
onBindViewHolder
Nashville, Tennessee binds the view with
the new values, and
Little Rock, then the view gets
Arkansas reinserted in the list.
This work is licensed under the
Android Development with Kotlin Apache 2 license. 57
Recycler View

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Recycler View
• Layout Manager
• LinearLayoutManager: vertical or horizontal
• GridLayoutManager

This work is licensed under the

Android Development with Kotlin Apache 2 license.
Add RecyclerView to your
layout
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 60
Create a list item layout
res/layout/item_view.xml
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/number"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 61
 Create a list adapter
class MyAdapter(val data: List<Int>) :
RecyclerView.Adapter<MyAdapter.MyViewHolder>() {
class MyViewHolder(val row: View) : RecyclerView.ViewHolder(row) {
val textView = row.findViewById<TextView>(R.id.number)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):

MyViewHolder {
val layout =
LayoutInflater.from(parent.context).inflate(R.layout.item_view,
parent, false)
return MyViewHolder(layout)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.textView.text = data.get(position).toString()
}
override fun getItemCount(): Int = data.size This work is licensed under the
Android Development with Kotlin Apache 2 license. 62
Set the adapter on the
RecyclerView
In MainActivity.kt:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val rv: RecyclerView = findViewById(R.id.rv)

rv.layoutManager = LinearLayoutManager(this)

rv.adapter = MyAdapter(IntRange(0, 100).toList())

}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 63
 Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 64
Summary

In Lesson 5, you learned how to:

● Specify lengths in dp for your layout
● Work with screen densities for different Android devices
● Render Views to the screen of your app
● Layout views within a ConstraintLayout using constraints
● Simplify getting View references from layout with data bindin
g
● Display a list of text items using a RecyclerView and custom
adapter This work is licensed under the
Android Development with Kotlin Apache 2 license. 65
Learn more

● Pixel density on Android

● Spacing
● Device metrics
● Type scale
● Build a Responsive UI with ConstraintLayout
● Data Binding Library
● Create dynamic lists with RecyclerView

This work is licensed under the

Android Development with Kotlin Apache 2 license. 66
Pathway

Practice what you’ve learned by

completing the pathway:
Lesson 5: Layouts

This work is licensed under the

Android Development with Kotlin Apache 2 license. 67