---
layout: presentation
title: Lab 5 Slides
description: Lab project--Review--
---

# CSE 340 Lab 3 (Winter 2020)
## Week 3: Layout

.title-slide-logo[
  ![Android Logo](img/android-linear.png)
]

---

# Timeline

- Layout part1-2 due: Yesterday (But you can still use the late days)

- Layout part3-4 due: Jan 31 (Next Friday)

- Reflection due: Feb 2

---

# Reflection?

- What did you learn from doing Part4?

- Was there anything that was surprisingly easy or hard?

- Include your diagram of the interactor hierarchy and the corresponding interface.

---

# Interactor Hierarchy

What would be the Interactor Tree for the Layout Part1/2 program?

.left-column-half[
  ![:img diagram of the interactor hierarchy shown on the next slide in graphic form, 50%](img/view-hierarchy.png)
]


--

.right-column-half[
<div class="mermaid">
graph TD
LL(LinearLayout) --> S[StatusBar]
LL --> RL[RelativeLayout]
RL --> SV[ScrollView]
RL --> BN[BottomNav]
RL --> CL[ConstraintLayout]
CL --> V2[ImageView]
CL --> V3[...]
CL --> V4[ImageView]


class LL,RL,SV,CL darkblue
class S,SV,BN,V2,V3,V4 blue
</div>
]
---

# Instruction for turning in Layout part 3-4

- **(Important!)** You will have to accept the Layout part3-4 at gitgrade

- Before you turn in: https://gitgrade.cs.washington.edu/student/summary/8086

- Work in the same repo as part1-2

- More information on piazza post: https://piazza.com/class/k2verexa56l5y3?cid=92


---

# Section 3 Overview

- `LayoutInflater`

- Previous exam problem of Layout

---

# What is LayoutInflater?

---

# LayoutInflater

Accepts a valid XML file and converts it into a `View` object or interactor hierarchy.

In part3 you will code half of it in an xml file and half of it in java.

Why? (Think about pros and cons of constructing with xml and java)

---

# Xml vs. Java

.left-column-half[
- Xml is easier setting up the Layouts

- Xml shows the Layouts directly

- Xml can be inflated many times
]

.right-column-half[
![XML vs Java](img/xml-vs-java.png)
]
---

# Xml vs. Java

- Java is easier adding items to the Layouts

- Java can use loops

- Sample solution of adding items into Layouts in part1(xml) has 55 lines

- Sample solution of adding items into Layouts in part2(java) has 17 lines


---

# How do we use the LayoutInflater?

1. Setting up the LayoutInflater
```java
LayoutInflater.from(Context context)
// Obtains the LayoutInflater from the given context
```

2. Inflate
```java
inflate(int resource, ViewGroup root)
// Inflate a new view hierarchy from the specified xml resource
```

---
# Quick Exercise

Construct a LayoutInflater and pass in the `part1.xml` file.

---

# Quick Exercise Solution

```java
// Obtain the inflater from the context
LayoutInflater inflater = LayoutInflater.from(context);

// Inflate R.layout.part1 and add to this vie
inflater.inflate(R.layout.part1, this);
```

---

# Previous Exam Question

---

# Solution

**What is the basic idea you have for how to fix it?**

> Constrain the top of the scroll to the bottom of the text view.

**Which view would you need to modify (provide the value you would set `android:id` to)?**

> `@+id/scrollView`

**What one line of XML would you add? Pseudocode ok here, you don't have to use exact names.**

> `app:layout_constraintTop_toBottomOf="@id/textView"`