CS184 Homework Assignment 1:
Getting Started with Android Programming

Posted:   Mon, Oct. 5
Due:        Mon, Oct. 12  (23:59:59)

Change Log:  
Wed, Oct. 7: Removed mention of APK creation. Not needed.

Objective:

Familiarize yourselves with the AndroidStudio IDE, general Android programming concepts, and program a very simple first Android application, deployed in the emulator, and on your device (if you already have one)! Understand the Android paradigm of an interplay of XML resources and Java code.

Instructions:

Your task is to expand the HelloAndroid example we showed in class. For this first exercise, you will create an Android UI with one text field, centered at the top of the screen, and one button. The text field will initially display the text Tap to Change Color. Every time you tap the button, you will generate a random color using RGB values, change the text to that color, and display the values for the color in the following format (assuming you are displaying a light grey with values 100/100/100): COLOR: 100r, 100g, 100b. 

Please create 2 different projects, for the two approaches listed 1. and 2. below.

In both cases, you start from an "Empty Activity" (not "No Activity", not "Basic Activity") in the Android Studio new project wizard.

The "package name" for your submissions throughout the entire quarter should follow this format: 

    edu.ucsb.cs.cs184.<your uname>.<your project name>

The two project names for this first assignment should be named <first initial><last name>ProgColorSwap and <first initial><last name>XMLColorSwap, so for Prof. Höllerer, for example, the complete two package names would be: 

    edu.ucsb.cs.cs184.holl.thollererprogcolorswap
    edu.ucsb.cs.cs184.holl.thollererxmlcolorswap

This way, when the graders run the resulting apps (.apk), they can easily gauge whose app they're grading, and AndroidStudio will not give them any conflicts when loading all your different projects.

You can make your own choice between Kotlin and Java (class encourages use of Kotlin), and for minimum API level, you can set "API 21: Android 5.0 (Lollipop)" (or lower if need be).

Here are the two approaches to implement:

  1. Project <first initial><last name>ProgColorSwap: Program the entire interface directly in code, not touching XML files. Your content view (set with Activity.setContentView()) should be a Layout (easiest, and recommended, would be a LinearLayout) that contains a TextView and button in vertical arrangement, both horizontally centered. The button will be labeled "Tap me !", and you should pick a suitable text size (in sp units) that makes the text line cover more than half the view width:



    Instead of just ColorSwap, the AppBar should say here: thollererProgColorSwap (replace thollerer with your own FirstInitialLastName combination)
     
  2. Project <first initial><last name>XMLColorSwap: Again, you start from an "Empty Activity,". You will modify the XML files describing this simple view, either by editing them in text mode or by using the graphical Android Studio Designer Tool (we demo that tool in class and discussion). You will add a horizontally centered TextView and button to the view and set the onClick option of the button either in the XML or (equivalently) in the Designer Tool:

     
    Instead of just ColorSwap, the AppBar should say here: thollererXMLColorSwap

Apart from the different app name, the second version should look the same as the first. Your views do not have to be precisely identical but should obey the same formatting constraints (horizontally centered, same text size, etc.). The main thing that can vary is the spacing of the elements, though in the simplest solution, this should end up the same anyways.

Hints & Pointers:

If you are not, or not that familiar with user interface programming (e.g. UI Events and Callbacks), start with approach number 2, experiment with layouts in the Designer tool, and put the interface together by both interacting with the Designer tool and editing the XML file.

For approach number 1, you create the widgets in code, rather than defining them in XML and retrieving them via findViewById.

Read up on the following:

If you follow (and experiment with) the entire "Building Your First App" tutorial, and particularly the "Create a Linear Layout" part of it, you are beginning to get very well prepared! You don't have to use a Linear Layout for this project, but Linear Layout will provide sufficient functionality for this. For fun, play around with Constrained Layout, Relative Layout, and nested layouts as well.

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.

This assignment had you creating two Android projects, one for each approach: Programmatical and XML. This will have led to the creation of a folder each, with a lot of files, within the default Android Studio working directory (often: ~/AndroidStudioProjects or C:/Users/<uname>/AndroidStudioProjects). You should create an apk for each project, and copy them into the base folder for submission. For Prof. Höllerer, the file hierarchy would thus look like this: 

    thollererProgColorSwap <DIR>
    thollererXMLColorSwap <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 two project folders. 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!