CS184 Homework Assignment 2:
Layout Change

Posted:   Wed, Oct. 14
Due:        Wed, Oct. 21  (23:59:59)

Change Log:  

Objective:

Further practice in Android programming! Familiarize yourselves with layouts, especially the ConstraintLayout, general Android programming concepts, such as the activity lifecycle and designing for different screen sizes and orientations.

Instructions:

Your task is to create an Android app that lets you enter a money amount via a numeric keypad implemented from scratch (to practice layouts!), and calculates change for that amount in terms of dollar bills (20,10,5,1) and coins (quarter,dime,nickel,penny).

You can start again from an "Empty Activity" in the Android Studio new project wizard, and theproject name should be <first initial><last name>ChangeMaker. The package name for your submissions (as always) should then follow this format: 

    edu.ucsb.cs.cs184.<your uname>.<firstinitialLastName>changemaker

You can make your own choice between Kotlin and Java (class materials will be predominantly in Java, but you are welcome to try Kotlin on your own initiative), and for minimum API level, you can set "API 21: Android 5.0 (Lollipop)" (or lower if need be).

Here is what you have to implement:

  1. In portrait mode, your app's main view shows a numeric keyboard consisting of buttons for the 10 digits and a clear button in the configuration shown below. To the left of it, there should be a table listing for the bills and coins that make up the change for any entered amount. In the top part of the screen, the entered amount is shown, next to a "Price:" label.

    When you tap any button, the corresponding digit is added to your current amount from the right (this is to make entry as easy as possible for you to program). I.e. if you type the digits '2', '3', and '4' in this order, you first will see an amount of 2¢, then 23¢, and then $2 and 34¢.




  2. When turning your device to landscape mode, the current interface should save state (keep the currently entered amount and change list), and present a slightly altered layout:





  3. The layouts on your app should work gracefully on phones and tablets. Test with the emulator on at least a Pixel XL phone (see screenshots above), and a Nexus 10 tablet (see screenshots below).


 

Hints & Pointers:

This assignment can be solved by using alternative layouts. Read the following sections of the Android Developer guidelines:
https://developer.android.com/guide/practices/compatibility
https://developer.android.com/training/multiscreen/screensizes

While you are allowed to use any layout type you wish to use, you should really familiarize yourselves with the ConstraintLayout. Our sample solution uses several nested ConstraintLayouts.
https://developer.android.com/training/constraint-layout
https://developer.android.com/reference/android/support/constraint/ConstraintLayout#developer-guide

It is sufficient for full credit to create layouts that work well on a Pixel XL phone (a 411x731dp screen) and a Nexus 10 tablet(800x1280dp) in both portrait mode and orientation mode (i.e. 4 different layouts).

Even though we will only test your app on these four screen sizes/orientations, you should check that you get reasonable results on other devices as well. List in your README.txt file what other device/screen types you have tested.

Do not hardcode any values in the layout xml files. When using specific text sizes, padding, and margin values for any of your layout alternatives, create them in sizes.xml in the values folder and refer to those.

 

Extra Credit:

For an extra 2% of the points, solve this assignment with just one portrait and one landscape layout. To make this work, all sizes and alignments need to be expressed relative to the screen size and other elements. Here is some information that could get you started:
https://constraintlayout.com/layouts/percentlayout.html

 

Submitting Your Homework

Please create a README.txt file in which you list all outside resources, if any, you used for solving the assignment, as well as any comments to the TAs you think helpful for grading. Also, please mention if you tackled the Extra Credit and how far you got.

Analogous with the previous assignment (but with only one project directory), your submission file hierarchy should look as follows 

    thollererChangeMaker <DIR>
    README.txt

To reduce size you may clean the project before zipping up the folders: in Android Studio go to Build > Clean Project. Please create ONE zip file with the README file and the project folder. Make sure that all files indeed got included recursively in the zip files, not just the first levels.

Please submit your zip file using Gauchospace. Make sure that your zip file contains all required directories and data, by downloading it again from GauchoSpace and checking its contents. It is your responsibility to make sure all data is there. We will NOT accept data submitted late even if time stamps on your system should show that they were authored before the deadline!