May 8, 2024 -- Notes

IT 372 -- May 8, 2024

Review Exercises

Create an Android app that contains an arraylist that holds Dog objects, defined with this XML diagram:
```
+----------------------------+
|            Dog             |
+----------------------------+
| + name : String            |
| + breed : String           |
| + age : int                |
+----------------------------+
| + Dog(name: String, breed: |
|       String, age: int)    |
| + toString( ) : String     |
+----------------------------+
```
On the layout, include 3 buttons, each of which adds specific Dog data to the arraylist. Also include a button that displays the list of dogs in the arraylist in a textview widget. Save the arraylist in a bundle that can be used to restore the arraylist when the app is destroyed due to being rotated.
Answer: activity_main.xml Dog.java MainActivity.java
How does the Unicode code (called the code point) for a character differ from the UTF-8 encoding? Why can't you just use straight Unicode to encode characters?
Ans: Here is an example. How do you interpret the hex Unicode code 266F? If you interpret the two bytes separately 26=& (ampersand) and 6F=o (lowercase o). If you interpret the two bytes together you get 266F=♯ (sharp sign from music). To resolve the ambiguity, use UTF-8. Assume that characters are represented by one byte unless they start with 110, which means two bytes, or they start with 1110, which means three bytes. The modified UTF (MUTF) system used by Android apps does not allow four byte representations.
What are the steps to obtaining the Unicode encoding for a character with a two-byte UTF-8 code?
Ans: (a) Obtain the hex Unicode code from the unicode.org website, (b) translate the hex Unicode code to binary, (c) group the binary bits into 5 and 6 bytes, omitting leading zeros, (d) insert the UTF-bits 110 to the left of the 5 bit group and insert the bits 10 in front of the 6 bit group, (e) regroup these resulting bits into groups of four and translate back into hex.

Obtain the UTF-8 encoding for the Euro character €, which has a three-byte UTF-8 code. Use this table to help you obtain the encoding:

             Minimum Maximum Byte 1   Byte 2   Byte 3
             code    code
             point   point
One byte:    U+0000  U+007F  0xxxxxxx 
Two bytes:   U+0080  U+07FF  110xxxxx 10xxxxxx 
Three bytes: U+0800  U+FFFF  1110xxxx 10xxxxxx 10xxxxxx

Ans: Look up the Unicode code for € on the unicode.org website. The hex code is 20AC. Since 0800 <= 20AC <= FFFF, we use the 3 byte representation:

(a) Translate to binary:
  2    0    A    C
0010 0000 1010 1100
(b) Group bits into groups of 4, 6, and 6 bits:
0010 0000 1010 1100 --> 0010 000010 101100
(c) Prepend the UTF-8 bits 1110, 10, and 10.
0010 000010 101100 --> 11100010 10000010 10101100
(d) Group into groups of 4 bits and translate
    back to hex:
11100010 10000010 10101100 --> 
1110 0010 1000 0010 1010 1100 --> E282AC

Check your answer. Copy and paste the Euro character € into Notepad or another editor that supports Unicode. Then display the hex dump of the file by invoking powershell and then entering the command

Format-Hex filename.txt

If you are on a Mac, which runs Unix, use the octal dump with the hex flag:

od -x filename.txt

What kind of UTF-8 encoding do Android apps use?
Ans: They use modified UTF (MUTF-8), which allows one, two, and three byte representations.

Adding Widgets Dynamically

Sometimes it is useful not to add and configure widgets at design time (in the XML layout file), but instead to add and configure them dynamically (in the Java activity code).
For Project 4, the custom View widget of type MyView must be instantiated, configured, and dynamically added to the layout.

Here are the steps to create an app that adds a textview and a button dynamically:

Create an app with an empty activity named DynamicWidgets.
Convert the ConstraintLayout to a LinearLayout with vertical orientation.
Set the id of the linear layout to linear_layout.
At the beginning of the MainActivity class, define the String array words and the int variables numWords and wordIndex:
```
private String[ ] words = 
    {"zero", "one", "two", "three", "four"};
```

In the onCreate event handler, perform the following:

Instantiate the linear layout:

LinearLayout layout = 
    findViewById(R.id.linear_layout);

Instantiate the textview and button. Declare them as final (constant) so that they can be used in the inner class of the event handler:
```
final TextView txtWord = new TextView(this);
final Button btnNextWord = new Button(this);
```

Set the text in the widgets:

 txtWord.setText(words[wordIndex++]);
btnNextWord.setText("NEXT WORD");

Set the textSize attribute for the widgets:

 txtWord.setTextSize(
    TypedValue.COMPLEX_UNIT_SP, 24);
btnNextWord.setTextSize(
    TypedValue.COMPLEX_UNIT_SP, 24);

Let the layout parameters for the widgets:

 LinearLayout.LayoutParams params =
    new LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(50, 50, 0, 0);
txtWord.setLayoutParams(params);
btnNextWord.setLayoutParams(params);

Place the widgets in the linear layout:

layout.addView(txtWord);
layout.addView(btnNextWord);

Add an onClick listener to the button:

 // Add onClick listener to button.
btnNextWord.setOnClickListener(
    new View.OnClickListener( ) {
        @Override
        public void onClick(View view) {
            txtWord.setText(
            words[(wordIndex++ % numWords)]);
        }
    });

Run the app to test it.
Here are the layout and Java activity files.

Drawing in a View

To draw in a view, create a subclass derived from View, which overrides the onDraw method.
This is similar to Swing, where you create a subclass of Panel and override the onDraw method.

Here is a simple onDraw method:

@Override
public void onDraw(Canvas c) {
    Paint p = new Paint( );
    p.setColor(Color.RED);
    c.drawCircle(100, 120, 30, p);
}

The MyView class should also have this constructor:

public MyView(Context context) {
    super(context);
}

Finally, a MyView object must be instantiated and added to the layout in the Java activity code:

 MyView mv = new MyView(this);
LinearLayout layout = findViewById(R.id.layout);
layout.addView(mv);

Here are the complete source code files:
activity_main.xml MyView.java MainActivity.java
Look at the Drawing1 and Drawing2 Examples.

Responding to Touch Events

Touch events are used to obtain the locations (x- and y-coordinates) of touches in a view.
The touch events that we will discuss come in three forms:
1. A finger not in contact with a view comes in contact with the view (ACTION_DOWN).
2. A finger in contact with a view moves to a different location on the view without losing contact (ACTION_MOVE).
3. A finger in with a view raises and loses contact with the view (ACTION_UP).
Use the setOnTouchListener to add a touch event handler to a view.
Look at the TouchEvent1 Example.

Challenge Problem

Combine the TouchEvent1 and Drawing Examples to draw a red disc whereever a touch up event occurs.