Lesson 5:

Layouts

Android Development with Kotlin v1.0 This work is licensed under the Apache 2 license. 1
About this lesson
Lesson 5: Layouts
● Layouts in Android
● ConstraintLayout
● Additional topics for ConstraintLayout
● Data binding
● Displaying lists with RecyclerView
● Summary

Android Development with Kotlin This work is licensed under the Apache 2 license. 2
Layouts in Android

Android Development with Kotlin This work is licensed under the 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.

Android Development with Kotlin This work is licensed under the 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 account.
● Android views are measured in Hello 80dp

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

Android Development with Kotlin This work is licensed under the Apache 2 license. 5
Screen-density buckets
Density qualifier Description DPI estimate

ldpi (mostly unused) Low density ~120dpi

mdpi (baseline density) Medium density ~160dpi

hdpi High density ~240dpi

xhdpi Extra-high density ~320dpi

xxhdpi Extra-extra-high density ~480dpi

xxxhdpi Extra-extra-extra-high density ~640dpi

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

Layout

Draw

Android Development with Kotlin This work is licensed under the Apache 2 license. 7
Drawing region

What we see:

How it's drawn:

Android Development with Kotlin This work is licensed under the Apache 2 license. 8
View margins and padding

View with margin View with margin and padding

View View
View

Android Development with Kotlin This work is licensed under the Apache 2 license. 9
ConstraintLayout

Android Development with Kotlin This work is licensed under the 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!

Android Development with Kotlin This work is licensed under the 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

Android Development with Kotlin This work is licensed under the Apache 2 license. 12
What is a constraint?

A restriction or limitation on the

properties of a View that the layout
attempts to respect

Android Development with Kotlin This work is licensed under the 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="parent"

Android Development with Kotlin This work is licensed under the Apache 2 license. 14
Relative positioning constraints

Top

Hello!
Baseline
Bottom

Android Development with Kotlin This work is licensed under the Apache 2 license. 15
Relative positioning constraints

Left Hello! Right

Start End

Android Development with Kotlin This work is licensed under the Apache 2 license. 16
 Simple ConstraintLayout example
<androidx.constraintlayout.widget.ConstraintLayout
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"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Android Development with Kotlin This work is licensed under the Apache 2 license. 17
Layout Editor in Android Studio
You can click and drag to add constraints to a View.

Android Development with Kotlin This work is licensed under the Apache 2 license. 18
Constraint Widget in Layout Editor

Fixed

Wrap content

Match constraints

Android Development with Kotlin This work is licensed under the Apache 2 license. 19
Wrap content for width and height

Android Development with Kotlin This work is licensed under the Apache 2 license. 20
Wrap content for width, fixed height

Android Development with Kotlin This work is licensed under the Apache 2 license. 21
Center a view horizontally

Android Development with Kotlin This work is licensed under the Apache 2 license. 22
Use match_constraint
Can’t use match_parent on a child view, use match_constraint instead

Android Development with Kotlin This work is licensed under the 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

Android Development with Kotlin This work is licensed under the 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.

Android Development with Kotlin This work is licensed under the Apache 2 license. 25
Chain styles
Adjust space between views with these different chain styles.

Spread Chain

Spread Inside Chain

Weighted Chain

Packed Chain

Android Development with Kotlin This work is licensed under the Apache 2 license. 26
Additional topics for
ConstraintLayout

Android Development with Kotlin This work is licensed under the 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

Android Development with Kotlin This work is licensed under the Apache 2 license. 28
Guidelines in Android Studio

Android Development with Kotlin This work is licensed under the 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>

Android Development with Kotlin This work is licensed under the Apache 2 license. 30
Creating Guidelines

● layout_constraintGuide_begin
● layout_constraintGuide_end
● layout_constraintGuide_percent

Android Development with Kotlin This work is licensed under the Apache 2 license. 31
Groups

● Control the visibility of a set of widgets

● Group visibility can be toggled in code

Android Development with Kotlin This work is licensed under the 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"/>

Android Development with Kotlin This work is licensed under the 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)
}

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

Android Development with Kotlin This work is licensed under the Apache 2 license. 35
Current approach: findViewById()
Traverses the View hierarchy each time
MainActivity.kt activity_main.xml

findViewById <ConstraintLayout … >

val name = findViewById(...) <TextView
val age = findViewById(...) android:id="@+id/name"/>
findViewById
val loc = findViewById(...) <TextView
android:id="@+id/age"/>
name.text = … findViewById <TextView
age.text = … android:id="@+id/loc"/>
loc.text = … </ConstraintLayout>

Android Development with Kotlin This work is licensed under the Apache 2 license. 36
Use data binding instead
Bind UI components in your layouts to data sources in your app.

MainActivity.kt activity_main.xml
<layout>
<ConstraintLayout … >
Val binding:ActivityMainBinding initialize binding
<TextView
android:id="@+id/name"/>
binding.name.text = … <TextView
binding.age.text = … android:id="@+id/age"/>
binding.loc.text = … <TextView
android:id="@+id/loc"/>
</ConstraintLayout>
</layout>

Android Development with Kotlin This work is licensed under the Apache 2 license. 37
Modify build.gradle file

android {
...
buildFeatures {
dataBinding true
}
}

Android Development with Kotlin This work is licensed under the 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>

Android Development with Kotlin This work is licensed under the 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"

Android Development with Kotlin This work is licensed under the 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"

Android Development with Kotlin This work is licensed under the 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>

Android Development with Kotlin This work is licensed under the Apache 2 license. 42
Displaying lists with
RecyclerView

Android Development with Kotlin This work is licensed under the Apache 2 license. 43
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

Android Development with Kotlin This work is licensed under the Apache 2 license. 44
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

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

Android Development with Kotlin This work is licensed under the Apache 2 license. 46
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"/>

Android Development with Kotlin This work is licensed under the Apache 2 license. 47
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>

Android Development with Kotlin This work is licensed under the Apache 2 license. 48
 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

Android Development with Kotlin This work is licensed under the Apache 2 license. 49
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())

}

Android Development with Kotlin This work is licensed under the Apache 2 license. 50
 Summary

Android Development with Kotlin This work is licensed under the Apache 2 license. 51
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 binding
● Display a list of text items using a RecyclerView and custom adapter

Android Development with Kotlin This work is licensed under the Apache 2 license. 52
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

Android Development with Kotlin This work is licensed under the Apache 2 license. 53
Pathway

Practice what you’ve learned by

completing the pathway:
Lesson 5: Layouts

Android Development with Kotlin This work is licensed under the Apache 2 license. 54