CP3406 2022 – Practical Exercise 2

Follow through and complete the tasks below – inspired by Chapter 2 from the textbook.

Note: The “Backwards Compatibility check box” is no longer available in the new project wizard for
Android Studio. Backwards compatibility is always on now – so any new project you create will be
using backwards compatibility by default.

Objective: Construct the Quicksum app

Imagine you are a school teacher or university lecturer. You would like a quick way to add up exam
marks across 100s of exam papers. Here is the Quicksum app use case:

1. After marking an exam paper, open the Quicksum app – it resets the sum to 0
2. Flip through the exam paper and click on the Quicksum app buttons to keep track of marks
for each answer
3. When all marks have been entered the app shows the total and can be recorded on the
exam paper

The Quicksum app is a cross between a Utility app and a Productivity app. It has the following
characteristics:

 At-a-glance information
 Helps increase the work efficiency of the user
 A minimal and concise UX (e.g. large and clear fonts, easy to read)
 app usage duration is about 10 seconds

The Quicksum app shouldn’t be complex. It should only show the most relevant information to the
user. It shouldn’t present lots of information.

Here is the required UX design for the app:

0
7 8 9

4 5 6

1 2 3

Task 1 – Construct the UI – 40mins

1. Create a new empty activity project in Android Studio called “Quicksum”. Set the API level at 21.
Be careful to set the folder location: Android Studio remembers the previous folder location 😊

2. In activity_main.xml, use “code completion” to swap the ConstraintLayout for a vertical

LinearLayoutCompat, like this:
You might also like to check out Android Studio in more detail. It is a powerful IDE!

LinearLayoutCompat is very similar to LinearLayout. We talk about why there are apparently two
versions of LinearLayout later in class. Note that older versions of the Android SDK might show:
android.support.v7.widget.LinearLayoutCompat. Don’t panic! The namespace and structure of the
support libraries change over time, but not LinearLayoutCompat. More about this in class!

3. Inside the LinearLayoutCompat adjust the TextView as follows:

 XML tags ending with “/>” empty tags – since they can’t be used to contain other tags
 The id attribute is used to provide access to a UI element programmatically in the
corresponding Activity class via (in this case) R.id.sum
 dp means “density-independent pixels”
 sp means “scalable pixels” (never use sp for layout_margin, layout_width, layout_height)
 You could use (say) px but that’s absolute pixels - not flexible across different screen sizes!
For more check out: https://developer.android.com/training/multiscreen/screendensities
 Also, don’t worry about the warning on the text attribute (yet!)

You should check the WYSIWYG view is something like this:

4. Using the WYSIWYG view, drag a TableLayout down underneath the TextView:

Have a look at the XML text editor view again, the TableLayout consists of a start and end tag
that contains a few TableRow empty tags like this:
5. Remove all the empty tags inside your TableLayout and add a single TableRow as a start tag and
an end tag, and place three empty Button tags inside that new TableRow like this:

You should see this:

 The new TableRow has its layout_height set to wrap_content

 The TableRow is probably not filling the screen width-wise – we can fix that!
6. Adjust each Button to look like this:

Now the buttons fill the screen “width-wise”, something like this:

When using weight attributes, the layout_width can be set to “0dp” – this helps optimize your
GUI! You might notice a suggestion from Android Studio about this! 😊

7. Make two more copies of your TableRow inside the TableLayout, you should see:

Hmm, that’s good, but we want each TableRow to use as much space on the screen as possible…

8. Add a layout_weight attribute to each TableRow start tag, like this:

 You should see this:

Nice, but now we want all the Buttons to fill the available space height-wise!

9. Adjust every Button as follows:

Your GUI should look something like this:

 Now, every Button in each TableRow has a layout_weight attribute set to “1” – this tells
Android to make each Button fill the available space in each row (height-wise in this case)!
 We talk more about layout_weight and setting layout_width to “0dp” in class!
 The style attribute is useful for setting the “look-and-feel” for UI elements – in this case we
are using a predefined Android style (it is possible to make your own…)
10. Add appropriate text attribute to each Button tag, and remove the text attribute in the
TextView, so your GUI looks like this:

Task 2 – Setup the button handler – 20mins

1. You might be wondering: “Shouldn’t we also add id attributes to the buttons?”. Well, actually
no. Instead, we make use of the Button tag’s onClick attribute – set this attribute the same for
all the buttons. Make its target a method called: “buttonClicked”

2. Add the method signature for buttonClicked() to the MainActivity.java

 The parameter view will be the Button that caused the event (aka “event source”)
 There is an “easy way” to use code completion to help you do this…

3. Add the following “downcast” to buttonClicked():

Now you have access to the button that caused the event!

4. Since we know that each button’s text is a number, we can safely convert it to an int:

int number = Integer.parseInt(button.getText().toString());

5. Now, all we need to do is keep track of the sum and update the TextView appropriately!

You will need to add a sum member field to MainActivity!

Task 3 – Improve Quicksum – 30mins

What else could you add to this app to make it more work efficient? What about:

 Go through activity_main.xml and MainAcivity.java and deal with the “yellow warnings”
(except for onclick attributes!)
 Try “extracting string” resources! For example, you click the mouse over the warning in a
button’s text attribute and select “extract string resource”

 Add a clear button that resets the sum to 0 (for the TextView and the member field). To do
this, you might find it hard to simply add a new Button tag under the
TableLayout… Hmmm, you might realise the clear functionality has
introduced some code duplication… try refactoring your code?

Task 4 – Self-reflection
After completing the practical exercises, spend some time reflecting on how well
you did, what things you had trouble with, what things were easy for you, what
other things you might be interested in learning about. Write about 100 words.

If there is a specific learning experience you want to write about in some detail,
we encourage you to use the Gibbs’ model of self-reflection. See here for a
discussion about Gibbs’ model plus an example.