Due: Monday 3 February 2024, NLT 2359 

Overview

This programming assignment will enhance and test your ability to design non-trivial user interfaces with both Linear and Constraint Layouts.  You will also be required to add some basic functionality.  The end result will be a complete (although useless) app.  Be sure to read and adhere to the course coding standards, found in the Admin section of this site, and properly comment and format your code.

Note: Read the entire assignment before starting to work on it!  

Finally, a reminder:

• Review the course policy on collaboration: 

Collaboration on all programming assignments, projects, and exams in this class is strictly prohibited.

 

Assignment Details

Now that you've successfully recreated the user interface for an Android calculator in class, let's appease all the iPhone fans. We'll build a calculator that looks like the default calculator on iPhone 11.

Your Tasks: 

1. Create a new Android Studio Project. It must be named A1_YourLastNameYourFirstName
   • Package name: edu.usna.mobileos.a1_yourlastnameyourfirstname
2. Create the user interface for the iPhone calculator for both portrait and landscape modes (shown above).  You have to use the Text editor for your layouts (XML) NOT design editor.
   • To create multiple layouts, you need to create separate folders under res. In the project view on the left of the screen, change app to Project Files. Expand the folders to find app/src/main/res, right click on the res folder and select New->New Resource Directory. Name your folder layout-land. Right click on the newly created layout-land folder, and select New->New Layout Resource File. Name the new file activity_main.xml. You can now return to the app view in the Project Manager. Under the res->layour folder you should see both layout files. You will edit this two files following the directions below.
   • Use a LinearLayout for landscape mode and a ConstraintLayout for the portrait mode. 
   • Your LinearLayout should use android:layout_weight so that it scales properly depending on the device's screen size.  
   • Your ConstraintLayout should use app:layout_constraintHorizontal_weight and app:layout_constraintVertical_weight to scale properly depending on the device's screen size. The ConstraintLayout should not be nested, and should not contain any LinearLayouts
   • You should strive to make your layout look as identical to the picture as possible. This includes colors and font size! You are NOT required to match the font face or style. When recreating the buttons for the scientific calculator functions (like square root), you are NOT required to match the text perfectly (eg: "1/X" or "2nd" doesn't look exactly the same as on the calculator, but is close enough).  You'll be able to get close with some of them using unicode characters, but some symbols wouldn't be possible without using images and that is NOT required.  
3. In your MainActivity, write the proper program logic such that:
   • when the user clicks a button (including the operator buttons), the button's value is displayed into the top TextView display area.
   • If there is already something in the display, then the button's value should be appended to the existing content, creating or extending the equation.   
4. Pressing the AC or = buttons should clear the display area.  
5. The proper layout should be displayed in the respective orientation when the device is rotated.
6. For the following special, super and subscript characters, append a "#" to the value in the display when pressed, instead of using the value of the button:
   • 2^nd
   • x²
   • x³
   • x^y
   • e^x
   • 10^x
   • 1/x
   • Square, Cube and y Root of x
   • log₁₀
   • pi
7. There is no requirement to actually do any calculations! (you're welcome)  

Remember, the point of the assignment is to reinforce the topics we've already covered in class.  If you get stuck, go back and review the previous lessons...you'll see that you've already done this before!  

There are many correct ways to do this.  Use whichever method you find most intuitive for you at first, but I challenge you to venture into the land of discomfort...you may actually learn something! 

Hints:

1. In order to be able to change the background for buttons in your layouts in XML, you will have to change the theme of your app (due to a bug in the Google library used by Android Studio).
   • In your project, go to res->values->themes->themes.xml
   • Change the "parent" value of the <style> element from 

     Theme.MaterialComponents.DayNight.DarkActionBar

     
     to

     Theme.MaterialComponents.DayNight.DarkActionBar.Bridge

2. Buttons in Android are by default rectangular, but you can create round(ed) buttons using the following method:
   • In your res->drawable folder, create a new Drawable Resource file with a name of your choosing, let's say darkgrey_button.xml. The content of this file should be something similar with the one below: 

     <?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android">
         <corners  android:radius="200dp"/>
         <solid android:color="#544c4c"/>
     </shape>

     • The value of the android:radius will determine how rounded the button is. Experiment with different values to find what works for you.
     • The android:color can reference a color in the values -> colors.txt file using @color/black for example. You can also just specify the hex value for the color you want.
   • Once the desired rounded shape is defined in the drawables folder, you can use it as the background for a button or text view, as follows:

     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background = "@drawables/darkgrey_button" />

      

Final Thoughts

This assignment requires a lot of experimentation.  It's also very time-consuming, so be sure to plan accordingly.  If you wait until the last minute, you will most likely run out of time and be forced to submit substandard work (and nobody likes that!).  Many times when developing Layouts, the changes you've made will seem to have no effect.  Often, this is because you've applied the attribute to the wrong item, or have conflicting attribute values in an item.  Be patient!  There's a reason why we're doing this first.  Mastering Layouts requires due diligence, so take breaks as needed...and a frosty beverage between coding sessions never hurts :-)

Grading

10 pts: Follows directions (4p zip file, 4p screenshots, 2p filenames) 

30 pts: Compiles and loads properly in the first try

15 pts: Proper button functionality

10 pts: Rotates properly and has correct layouts according to orientation

10 pts: Accurate visual portrayal of the iPhone calculator (close to coloring, layout, etc.)

10 pts: Strict following of specs (linear/constraint layout)

10 pts: Code efficiency (good object oriented design)

5 pts: Proper commenting/following of the coding standards

Submission

Submit the following in a single .zip archive file named A1_YourLastNameYourFirstName.zip (e.g. A1_JonesJohn.zip) using the submit system (as submit.cs.usna.edu) under assignment1:

• The complete contents of your Android Studio Project named A1_YourLastNameYourLastName, without the app/build folder. You can either use your operating system's file structure, or use the export functionality in Android Studio to export to a zip file. Please remove the build folder from your A1_YourLastNameYourLastName/app folder before zipping.  
• Two screenshots of your application running on the phone: one for each orientation. You can simply drag and drop into your zip folder.

Name the file A1_YourLastNameYourFirstName.zip (e.g. A1_JonesJohn.zip).  Before submitting, double-check to make sure you've followed the course coding standards and your code is well documented.

 ~/bin/submit -c IT=472 -p=assignment1 A1*.zip