Homework 1: Biography viewer App GUI

In this homework, you will create a prototype UI for a biography viewer application. The design of the app will change based on whether you view it in Portrait or Landscape orientation. The UI will have 5 elements:

1. Portrait - One ImageView displaying a drawable image resource
   • (experiment/investigate how to add this)
2. Name - A TextView, displaying a value defined in a String resource xml
3. Biography text - A TextView displaying a value defined in a String resource xml
4. 2 Buttons - showing String resource xml-based values

Use an image and text of your own choice, but the biography text should be at least 200 chars long.

Create a new project (use minSDK API 27) and modify the default activity according to the following specification.

Portrait Mode

Placement of elements in ConstraintLayout ( 2 pts)

• The Name TextView should be at the exact center of the screen
  • This means it should have 2 vertical and 2 horizontal constraints to the parent (the screen edges)
  • Update the textSize attribute of the TextView to a larger than default value.
• The ImageView should be vertically centered between the top edge of the screen and the Name TextView:
  • Top constrained to screen edge, bottom to top of Name TextView
  • Horizontally, it should have 2 constraints - to both screen edges.
• Both buttons should be vertically constrained only to the bottom of the screen
  • The "Previous" button should have 1 horizontal constraint to the left edge of the screen
  • The "Next" button should have 1 horizontal constraint to the right edge.
• The Biography TextView should be placed vertically such that:
  • Its top is constrained to the bottom of the Name TextView
  • Its bottom is constrained to the top of of one of the Buttons

Adjust the widths and height attributes to either wrap_content or match_constraint (0dp) to obtain the above result. Do not use any hardcoded numeric values except 0dp!

Try to use margins to get visually nicer results (similar to above screenshot)

Usage of String resources (1 pt)

• Make sure all the TextViews and Buttons use String resources, not hardcoded string values!

Landscape Mode (2 pts)

Second layout for landscape mode

• Create a 2nd activity layout resource file for Landscape mode, which also uses ConstraintLayout
  • Based on the Android Resource system, when you rotate the device, the App should automatically switch between the 2 layout files!

Placement of UI elements:

Place the same 5 elements in the layout with a different organization as shown below:

• Name TextView should:
  • Vertically have only 1 constraint - to top of the screen
  • Horizontally be centered (have 2 contraints to screen edges)
• The Buttons should be:
  • Vertically constrained only to bottom of the screen (same as Portrait mode)
  • Horizontally:
    • The "Previous" button should have 1 horizontal constraint to the left edge of the screen
    • The "Next" button should have 1 horizontal constraint to the right edge.
  • A Horizontal Chain should be formed from the 2 buttons, in "packed" mode, to make them appear next to each other at the center of the screen (see screenshot)
• The ImageView and Biography TextView
  • Should also form a Horizontal Chain, both with a width set to 0dp (match_constraint), so as to equally fill out the horizontal space.
  • Vertically, the should be constrained between the bottom of the Name TextView and Top of one of the buttons.

Again, you may need to adjust the layout_width or layout_height of some elements or add margins, but don't use any value other than "match_parent", wrap_content or 0dp

• When you run your application and rotate the device, the App should switch between the two activity layout files!
  • Make sure you haven't locked the device rotation in phone settings