Layout Timeline

• Layout part 1-2 due: Tomorrow @ 10:00pm (No late days allowed)

• Layout part 3-4 and Reflection due: Next Thursday, April 23 @ 10:00pm

  • Lock: Saturday, April 25 @ 10:00pm (If you are using late days)

Instruction for turning in Layout part 3-4

• (Important!) You will have to accept the Layout Part 3-4 at Gitgrade before you turn in

• Track your acceptance/ submission of all assignments: https://gitgrade.cs.washington.edu/student/summary/8723

• Work in the same repo as Part 1-2

Section 3 Objectives

• User Interfaces on Android

  • ConstraintLayout
  • Interactor Hierarchy

• LayoutInflater

  • XML vs. Programmatic (Java)

• Previous exam problem of Layout

  • Worksheet: https://tinyurl.com/cse340lab3

User Interfaces on Android

Layout in Android

Where we left off: "Many layout and other attributes for components. You should explore!"

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

Constraint Layout

What are Constraints?

Worksheet: Interactor Hierarchy

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

LayoutInflater

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

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

• Why? (Discuss about pros and cons of constructing layout with XML and programmatically)

XML vs. Programmatic (Java)

XML vs. Programmatic (Java)

• Programmatic is easier adding items to the Layouts

• Programmatic can use loops

• Sample solution of adding items into Layout in Part 1 (XML) has 55 lines

• Sample solution of adding items into Layout in Part 2 (Java) has 17 lines

How do we use the LayoutInflater?

1. Setting up the LayoutInflater

   // Obtains the LayoutInflater from the given context
   LayoutInflater.from(Context context)

2. Inflate

   // Inflate a new view hierarchy from the specified XML resource
   inflate(int resource, ViewGroup root)

Worksheet: Quick Exercise

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

Quick Exercise Solution

public Part1View(Context context, List<String> imageNames, int vMargin) {
// Obtain the inflater from the context
LayoutInflater inflater = LayoutInflater.from(context);
// Inflate R.layout.part1 
View newView = inflater.inflate(R.layout.part1, null); // newView is at the root of the inflated tree
// Add it to this view
this.addView(newView);
}

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"