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 - good for position views on top of each other, or encapsulating a bunch of views. Used in Doodle.
• LinearLayout - places views one after the other in order according to the orientation (Horizontal or Vertical). Used in Layout.
• RelativeLayout - Positions of the children are desribed in relation to one another
• TableLayout - Rows and columns style way of declaring a layout
• GridLayout - Uses an [adapter](https://developer.android.com/reference/android/widget/Adapter that provides items to display in a grid
• ConstraintLayout Let's you use constraints to specify how things should lay out. Used in 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

| |

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.

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).

| |

TableLayout

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

| |

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

| |

Constraint Layout

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?

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

• Clone 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

- GitHub Link to Solution

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

• Inflation
• Programatically