Lab 3 Slides — Interaction Programming (CSE 340)

# [CSE 340](/cse340-website-prototype/schedule.html) Winter 2023 Lab 3
.left-column50[
  ![:img Android phone showing a linear layout of todos on a calendar, 50%, width](img/android-linear.png)
]

---
# Layout Timeline

- Layout Checkpoint Due: Thur 14-Apr
- Layout Part 3-5 Due: Thur 21-Apr

# Instruction for turning in Layout part 3-4
- Work in the same repo as Part 1-2
- Turn into the Ed lesson for Part 3-4

---
# Section 3 Objectives

- Layout Part 3 and 4 Prep
  - [XML vs. Programmatic (Java)](#4)
  - ["Inflate" in Android](#6)

- [Review](#11)

- [Calculator App](#20)
  - [Section 3 Exercise](#22)

---

# XML vs. Programmatic (Java)

.left-column50[ 
- XML files -> good for describing **static finite** information, a data format

- XML is easier setting up the Layouts

- XML shows the Layouts directly

- XML can be inflated many times, like a blueprint
]

.right-column50[
![XML vs Programmatic Java](img/xmlvsjava.png)
]
---

# XML vs. Programmatic (Java)

- Programmatic method: easier adding items to the Layouts
  - Can use loops!

- Sample code of adding items into Layout in Part 1 (XML) has 55 lines
- Sample code of adding items into Layout in Part 2 (Java) has ONLY 17 lines!

---

# LayoutInflater

- **"Inflate":** Accepts a valid XML file and converts it into a `View` object or interactor hierarchy.
  - stuff declared in XML -> be able to manipulate them in Java
  - done by the Android OS; render the thing by creating view objects in memory

- In Part 3 you will code part of it in an XML file and the rest programmatically (using Java).

- Why? Discuss about pros and cons of constructing layout with XML and programmatically

---

# How do we use the [LayoutInflater](https://developer.android.com/reference/android/view/LayoutInflater#inflate(int,%20android.view.ViewGroup)?

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

2. [Inflate](https://developer.android.com/reference/android/view/LayoutInflater#inflate(int,%20android.view.ViewGroup,%20boolean)
```java
/**
 * Inflate a new view hierarchy from the specified XML resource
 * @param resource - int ID for an XML layout resource to load
 * @param root - view to be the parent of the generated hierarchy, can be null.
 * @param attachToRoot - true to make the root a parent
 */
inflate(int resource, ViewGroup root, boolean attachToRoot)
```
---
# Quick Exercise
In an ExampleView, construct a LayoutInflater and pass in a `example.xml` file to inflate in its constructor.

```java
public ExampleView(Context context, List<String> imageNames, int vMargin) {
  // Obtain the inflater from the context
  LayoutInflater inflater = LayoutInflater.from(context);

// Inflate and attach it as a child of *this* View (ExampleView)
  inflater.inflate(R.layout.example, this, true);
}
```
---

# Reminder From Last Week: [Layout Lab](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/tree/master)
- When doing Layout Part3/4: Reference the solution the for the "programmatic" method
- GitHub Link to [Solution](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/blob/jay-solution-with-comments/app/src/main/java/cse340/exercises/layoutlab/ProgrammaticConstraints.java)

---
class: middle, center

# Review
Interactor Hierarchy labeling and drawing trees<br>
Toolkit architecture vs Toolkit library

---
# Review Q1: Drawing Hierarchy
.left-column50[
View Hierarchy question:
- Draw a View Hierarchy based on the screen capture.
- Only include the contents below the top green bar.
]
.right-column50[
![:img Android app showing a vertical list of recent and previous messages, 60%, width](img/examlet_prac_3_layout.png)
]

---
# Review Q1: Drawing Hierarchy
Here's an example of how you should format the View hierarchy
Remember last week's Alarm app example?
.left-column50[
![:img Alarm clock application screenshot and interactor hierarchy, 100%, width](img/alarmclock.png)
]
.right-column50[
![:img Alarm clock view hierarchy, 60%, width](img/viewhierarchy.png)
]

---
# Review Q1: Drawing Hierarchy Answer
.left-column50[
Possible answer:
![:img Possible exam answer showing a hierarchy of Views in the aforementioned example picture, 100%, width](img/examlet_prac_3_ans.png)
]
.right-column50[
![:img Android app showing a vertical list of recent and previous messages, 60%, width](img/examlet_prac_3_layout.png)
]

---
# Review Q2: Parent-Child Order
Regarding the below tree, list the z-order (from bottom to top) they will be drawn in.
<div class="mermaid">
graph TD
  Parent -->A[Foo]
  Parent -->B[Bar]
  Parent -->C[Baz]

</div>

--
- **1. parent 2. foo 3. bar 4. baz**
---
# Review Q3: Android Methods
- Consider the onMeasure() method that is overridden in Layout Part 3.
- Is this method part of the **toolkit architecture or library?**

---
# Review Q3: Android Methods Answer
- **Answer: Toolkit Architecture**

- "Architecture": the fundamental running code that builds your app
  - Includes interactor hierarchy
  - Decides structure, redraw, layout, MEASURING stuff!
  - Manage your components/app lifecycle

---
# Reminder: Developer roles
<div class="mermaid">
  graph LR
  ip[Interface Programmer]
  w[Component Developer]
  l[Library Extender]
  a[Architecture Extender]
  t[Toolkit Builder]

classDef yellow font-size:14pt,text-align:center
  classDef green font-size:14pt,text-align:center
  classDef darkblue font-size:14pt,text-align:center

class t yellow
  class w,l,a green
  class ip darkblue
</div>

---
# Review: Other Definitions
- [Interface Toolkit](https://courses.cs.washington.edu/courses/cse340/22sp/slides/wk01/first-app.html#31): provides services that help you create things
  - Used by your program
  - Contains library of components, architecture

- "Library": optional COLLECTION of functions, classes, COMPONENTS... that you can include in your app
  - Includes ex: ImageView class, ____View class ...etc
  - Third Party Libraries

---
# Calculator App
- [This](https://gitlab.cs.washington.edu/cse340/exercises/mvc-calculator/-/tree/section3-layoutonly) is a simple Android calculator app.

- Clone section 3 branch

- Examine src/main/res/layout/activity_main.xml

- How could you refactor or reorganize this code?

--
 - Example: `<include/>` tag --> [Android Docs](https://developer.android.com/training/improving-layouts/reusing-layouts)

---
# Section 3 Exercise Submission
- Submit evidence of refactoring. 
- Options (can choose all or any):
  - Submit XML files (can highlight whichever part they modified) demonstrating your refactor and restyling/added strings
  - Screenshot of changes
  - Make some text comments on the Edstem submission on what you changed in the code
  - Clone your whole repo and upload that zipped file

---
# Need help with Layout? Other Questions?