CP3406 2022 – Practical Exercise 4

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

This exercise will explore various UI elements such as FrameLayouts, ScrollViews, the meaning of
resource ids and the composability of layouts. In addition, the exercise introduces you to one way to
programmatically generate layouts at runtime.
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.

Task 0 – Self-Exploration – TODO during this week – 1hr

Review the Week 4 “Content Slides” about the “Mobile Ecosystem”. Answer the following question
as a new entry in your “Self-reflections” Journal in LearnJCU:

“What is the mobile ecosystem?” (100-200 words). 

Objective: Construct the Reflex Checker App – 5mins

Let us imagine that you are a HCI researcher trying to understand how humans respond to mobile
user interfaces that scroll vertically. You imagine an App that tests “interactivity speed” by asking a
user to complete randomly generated “checkbox selection tasks” as quickly as possible. You are
doing this because you want to find out if age is important factor behind interactivity speed.

You decide that your App will use a set of randomly chosen names of drinks and fruits. You want the
App to randomly ask the user three different tasks: 1) select all items, 2) deselect all items, 3) select
one item. You also add in randomly selected images to spare out the check boxes. Here is an
example of what the final App could look like:

Task 1 – Setup project, FrameLayout, resources, formatting – 20mins

1. Create a new “Empty Activity” Android Studio project called ReflexChecker. Setup its package
name as au.edu.jcu.reflexchecker. Set the API level at 21. Be careful to check the folder location
since Android Studio remembers the previous folder location 😊
2. Adjust the MainActivity’s layout as follows:
a. Replace the ConstraintLayout with a FrameLayout
b. Adjust its TextView as follows: remove unnecessary constraint attributes, set its margins
to be 16dp, layout_width matching its parent, layout_height wrapping its content and
add the following text directly to its text attribute:
This App tests your reflexes. After you press the Start button you are
presented with two tasks and a scrollable view that contains alternating
images and checkboxes. When finished the tasks, click the Done button.

Android Studio should tell you that directly adding text like this is not “best practice” 😊

3. So “extract string resource” and move the text into strings.xml. Name this new string resource
“instructions”.

After extracting, your TextView should look like this:

4. Next, add the “Start” Button to the center of the FrameLayout – use layout_gravity to do this!
Make use of another string resource for its text.

You should always extract all string resources in your projects!

5. Add an onClick attribute to the “Start” Button for a new Java method called “startTest”. Create
the necessary Java method in your MainActivity.

6. Add a new “empty activity” to your project called GameActivity. Add the necessary Java code to
startTest() to create an explicit intent that starts your GameActivity.

In Android Studio, it is a good idea to regularly use CTRL-ALT-L and CTRL-ALT-O after you edit
XML or Java code. CTRL-ALT-L is the keyboard shortcut for “reformat code”. CTRL-ALT-O is the
keyboard shortcut for “optimize imports”. Note that these are also available under the “Code”
menu in Android Studio.

You should regularly check your XML for formatting and/or import issues!

7. Test out your work and make sure the Start Button takes you from the MainActivity to the
GameActivity.
Task 2 – Create game GUI – programmed layouts, image resources –
40mins
It is important to randomise what the user sees each time they play the game. We can do this by
programmatically inflating and configuring a set of partial XML layout files.

1. First things first though, adjust activity_game XML as follows:

a. Replace the ConstraintLayout with a TableLayout
b. Set the padding for the TableLayout to be 16dp

2. Add two TableRows inside the TableLayout with the following:

a. layout_width matching the parent
b. layout_height wrapping the content

3. Inside the first TableRow, add two TextViews:

a. The first TextView contains the text “Task 1:” (setup a string resource!). Make its
layout_width wrap its content and its layout_height match its parent.
b. The second TextView has a layout_height that matches its parent, a layout_width
of 0dp, a layout_weight of 1, and a unique id (e.g. “+id/task1”).

4. Setup the second TableRow the same as the first, except it has text “Task 2:” for its first
TextView and another unique id (e.g. “+id/task2”) for its second TextView

Note: the combination of a zeroed layout width and an explicit layout weight ensures that
the task description TextView consumes most of the available space within each TableRow:

Did you check and fix any XML formatting / importing issues? 😊

5. Okay so now we want to randomly assign the description of each task. One way to do that is
by creating <string-array> resources. Add the following to strings.xml:
 Note: the “IDs” for these string-arrays are “task1_descriptions” and “task2_descriptions”.
6. Add a new private member field to the GameActivity for generating random numbers:

Did you notice the yellow warning for this? 😊 Can you fix it?

7. Let’s create a “helper method” in GameActivity.java called setupDescription() as follows:

This demonstrates a few important things about Android programming:

 A resource is identified by an int value! Even for string-arrays!
 Because of this, we can easily setup methods that use resource parameters –
just like how Android APIs work (e.g. findViewById(int res_id)) 🤯
 The taskID parameter is used to reference a task description TextView
 The arrayID parameter is used to reference a string-array
 getResources() is an Activity API method that gives you access to different types
of resources in your project
 The Resources class has several useful methods such as getStringArray()

We use all these capabilities to randomly select one string from a particular string-array resource
and used that to set a particular task description!

8. To use this helper method, in your GameActivity’s onCreate() method add the following:
 This also shows you how useful helper methods are! 😊 The code is neat and readable.

9. Next, open https://material.io/resources/icons and select an icon you like – set the type to
“Android” – and download the PNG zip file:

10. Repeat the previous step, but this time select about 5 more icons. What this does is give you
a few zip files each with a set of correctly scaled image files for your Android project!

11. Next, place all these zip files into your project folder at “ReflexChecker\app\src\main” and
unzip them in-place:
 This will extract all the PNG files across a series of subfolders under the res folder for you.
Your project folder should look unchanged. You can delete the zip files now.

In Android Studio, the drawable’s resources should now look something like this:

We do not actually need all these variations – only the 48dp images are useful.

12. Delete the drawables with sizes 18,24,36 from your Android Studio project. Here is what you
should end up with:
 This is good practice for working with resource files in your project 😊

Note: there are five different scaled versions of the same PNG image for each drawable.
Android will automatically use the best version of each image - depending on the physical
screen size and resolution for the actual mobile device the App runs on…

13. We need a ViewGroup to contain these images – so add the following XML to your
activity_game.xml beneath the existing two TableRows:

This adds a scrollable TableLayout to the GameActivity. Notice the id defined for this
TableLayout – it is so we can access this View in GameActivity.java.

14. We also need an easy way to reference the drawables, add a symbolic constant similar to
the following into your GameActivity as a new member field:

We probably selected different icons to you… so use yours.

Notice again that we are referencing resources via int values!
15. Now you can create a new helper method called addRandomImage() in GameActivity:

Things to note about this code:

 The first line of code give you access to the TableLayout in activity_game.xml
 The second line inflates the content of image.xml and adds it to the end of
TableLayout, which in this case is an ImageView…
 The middle two lines of code give you access to that ImageView
 The last two lines randomly select an image and assigns it to the ImageView

You should see a Java syntax error for R.layout.image. We are about to create a custom
layout file separate from the other layout files!
Note: you can add any number of new XML layout files to your project…🤯

16. Add a new XML layout file called “image.xml” to the res/layout folder within your project.
This layout file will contain just enough XML layout to display an image.
 17. Setup your image.xml similar to the following example:

18. Add a for loop to the end of onCreate() in GameActivity to call addRandomImage() 5 times.
Then try out your app so far! Make sure the tasks are random and the images are random!

Task 3 – Create the game GUI – programmed layouts, checkboxes –

60mins
We leave the remaining parts of the exercise as a challenge for you! 😊

Here is what you need to do:

1. Create a new layout file called checkboxes.xml. Set its root view as a TableRow – give this an
id called “+id/checkboxes”. Inside this table row place three Checkbox XML tags. Note:
checkboxes have a text attribute. Setup up the layout for the Checkbox appropriately. You
might consider reusing string resources… 😊
2. Create two new string-arrays named drinks and fruits. Use these to hold a list of drink
names and fruit names respectively. These will be the text content for your CheckBoxes.

3. Add a helper method called addRandomCheckboxes(int arrayID) to your GameActivity. Use

it to inflate checkboxes.xml and add its TableRow to the end of your “gameRows”
TableLayout. Hint: the first 2 lines of code in addRandomImage() is a useful guide for this…

4. Create a for loop inside addRandomCheckboxes() that accesses each element inside
checkboxes.xml. Once you have access to each checkbox, set its text and checked status
randomly using the string-array referred to via arrayID.

Remember, you already created the random member field! Note: TableRow has a method
called getChildAt(int). Hint: the rest of the code in addRandomImage() will be useful … in
this case, you can set lastChild to be the newly added TableRow containing checkboxes!
Also, see how setupDescriptions() accesses a random element from its arrayID resource…

Hmmm, you might even consider refactoring the codebase – there is a bit of duplication now
inside addRandomImage() and addRandomCheckboxes(). I suppose that gameRows could
be a member field instead of a local variable…

At this point, your app should be capable of showing random tasks choices, random images,
and randomly selected drink and fruit checkboxes.

5. (EXTRA) Add a “Done” Button and an extra TextView to display the elapse time (use
System.nanotime() for this…)
Task 4 – Self-reflection – TODO after completing exercises – 30mins
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. For example, you write 1-2 sentences about each of the following things:

1. Description of the experience

2. Feelings and thoughts about the experience
3. Evaluation of the experience, both good and bad
4. Analysis to make sense of the situation
5. Conclusion about what you learned and what you could have done differently
6. Action plan for how you would deal with similar situations in the future, or general changes
you might find appropriate

Add your self-reflection as an entry into the “Self-reflections” Journal in LearnJCU.