Lab 2 Slides

# CSE 340 Lab 2 (Winter 2021)
## Week 2: Final Doodle Requirements and Layout Review

.title-slide-logo[
![:img Android phone showing a linear layout of todos on a calendar, 20%, width](img/android-linear.png)
]
---

# Doodle and Layout Timeline

- Doodle due: Tonight @ 10:00pm

- Doodle locked: Saturday, January 16th @ 10:00pm
    - Peer evaluations will be assigned by end of day

- Doodle peer eval due: Sunday, January 17th  @ 10:00pm

- Doodle reflection due: Tuesday, January 19th  @ 10:00pm

- Layout part 1-2 due: Thursday, January 21 @ 10:00pm (No late days allowed)

- Layout part 3-5 (code + reflection) due: Thursday, January 28 @ 10:00pm

---

# Section 3 Objectives

- Brief overview of different layout types in Android

- Review previous layout exam problems

- Layouts practice

---

# Layout Types in Android

- [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) - good for position views on
top of each other, or encapsulating a bunch of views. Used in [Doodle](https://courses.cs.washington.edu/courses/cse340/21wi/assignments/doodle.html).
- [__LinearLayout__](https://developer.android.com/reference/android/widget/LinearLayout) - places views one after
the other in order according to the orientation (Horizontal or Vertical). Used in [Layout](/assignments/layout).
- [__RelativeLayout__](https://developer.android.com/reference/android/widget/RelativeLayout) - Positions of the children
are desribed in relation to one another
- [__TableLayout__](https://developer.android.com/reference/android/widget/TableLayout.html) - Rows and columns style
way of declaring a layout
- [GridLayout](https://developer.android.com/reference/android/widget/GridLayout.html) - Uses
an [*adapter*](https://developer.android.com/reference/android/widget/Adapter that provides items to display in
a grid
- [ConstraintLayout](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout) Let's you use constraints to specify how things should lay out. Used in [Layout](../../assignments/layout).
- More on https://developer.android.com/guide/topics/ui/declaring-layout.html

---

# FrameLayout
- FrameLayout is designed to block out an area on the screen to display a single item. 
- Can add multiple children to a FrameLayout and control their position by assigning gravity to each child (android:layout_gravity attribute)
- Child views are drawn in a stack, with the most recently added child on top

![:img Challenge for buttons in XML, 70%, width](img/framelayout_1.png) | ![:img Challenge with buttons to be added programatically, 20%, width](img/framelayout_2.png)|

---
# LinearLayout
- LinearLayout organizes its children into a single horizontal or vertical row. 
- Creates a scrollbar if the length of the window exceeds the length of the screen.

![:img Linear layout of an email message with to line subject line and message arranged vertically, 25%, width](img/linearlayout.png)

---

# RelativeLayout
- Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).

![:img Challenge for buttons in XML, 20%, width](img/relativelayout_1.png) | ![:img Challenge with buttons to be added programatically, 20%, width](img/relativelayout_2.png)|

---

# TableLayout
- TableLayout arranges its children into rows and columns
- Can leave the cells empty
- Why choose this over GridLayout? 
  - Not much data, fixed

![:img Challenge for buttons in XML, 40%, width](img/tablelayout_1.png) | ![:img Challenge with buttons to be added programatically, 40%, width](img/tablelayout_2.png)|

---

# GridLayout
- GridLayout places its children in a rectangular grid
- Must define the number of rows and columns first, then populate with Views
- Why choose this over TableLayout?
  - Easy to arrange lots of data because you don’t need to specify each View’s width and height
  
![:img Challenge for buttons in XML, 20%, width](img/gridlayout_1.png) | ![:img Challenge with buttons to be added programatically, 50%, width](img/gridlayout_2.png)|

---

# Constraint Layout
.left-column[

![:img A simple layout on an android watch with a textview and two
buttons (save and discard) and the constraints highlighted,150%,width](img/constraint-editor.png)
]
.right-column70[
- ConstraintLayout is a ViewGroup that allows you to position widgets in a flexible way
- Useful for building responsive interfaces in Android.
- You can see little lines connecting the `textView` to its container and it's sibling (the `linearLayout`).
  - This specifies how it's attached (can change type by clicking on right)
  - If you were to change the interface (e.g. a different sized screen), it would stay attached and keep filling the space
]
---

# Previous exam problem of Layout
  - Worksheet: https://preview.tinyurl.com/cse340section2

---

# Worksheet: Interactor Hierarchy

What would be the Component Tree for the Layout Part 1-2 program?

.left-column50[
  ![:img diagram of the interactor hierarchy shown on the next slide in graphic form, 100%,width](img/LayoutSpec.png)
]
--
.right-column50[
<div class="mermaid" style="font-size: small;">
graph TD
LL(LinearLayout) --> S[StatusBar]
LL --> RL[RelativeLayout]
RL --> SV[ScrollView]
RL --> BN[BottomNav]
SV --> 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>]

---

# 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"`

---

# Practice with the [Layout Lab](https://github.com/harshitha-akkaraju/layoutlab)

- Clone [https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/)
- Open it up in Android studio
- Switch between the challenges based in the `AndroidManifest.xml`

| Create this layout using XML | Create this layout programatically |
| :-- | :-- |
| ![:img Challenge for buttons in XML, 30%, width](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/blob/master/img/xml-layout.png) | ![:img Challenge with buttons to be added programatically, 30%, width](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/blob/master/img/programmatic-layout.png)|

---

# - GitHub Link to [Solution](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/blob/master/app/src/main/java/cse340/exercises/layoutlab/ProgrammaticConstraints.java)

Don't peek until you've tried it :)

- [Inflation](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/blob/master/app/src/main/res/layout/activity_main.xml)
- [Programatically](https://gitlab.cs.washington.edu/cse340/exercises/layoutlab/-/blob/master/app/src/main/java/cse340/exercises/layoutlab/ProgrammaticConstraints.java)