May 5, 2025 -- Notes

To Lecture Notes

IT 372 -- May 5, 2025

Review Exercises

Create an Android app that contains an arraylist that holds Dog objects, defined by this UML 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

ASCII Characters, Binary, and Hex

You are probably familiar with ASCII (American Standard Code for Information Interchange), which was first published as a standard in 1963.
The ASCII codes are shown in these two tables:
ASCII Table -- Printable Characters
and
ASCII Table -- Nonprintable Characters
Example: what is the ASCII code for M? Answer: 77 decimal.
Computers use the binary representation for ASCII characters. We could translate 77 decimal into binary like this:
```
77 = 64 + 8 + 4 + 1
   = 0*2⁷+1*2⁶+0*2⁵+0*2⁴+1*2³+1*2²+0*2¹+1*2⁰
   = 01001101 binary
```
An easier way to obtain the binary representation of an ASCII character is to start with the hex representation, in this case 4d. Then use this Hex Digits Table to convert the hex digits individually into binary:
```
4d hex = 0100 1101 = 01001101 binary.
```

UTF-8 Encoding

We have already seen how Unicode characters can be displayed in a TextView widget. If the TextView object that represents this widget is tv, the Greek letters α, β, γ were displayed in the textview like this:
```
rv.setText("\u03B1, \u03B2, \u03B3"); 
```
How does the Unicode code (called the code point) for a character differ from its UTF-8 encoding? Why can't you just insert straight Unicode character codes into a file which is mostly ASCII codes? 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, which assumes 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.
UTF-8 Encoding (published in 1992) is used to encode files that contain one-, two-, three-, or four-byte Unicode characters.
MUTF-8 (Modified UTF-8) Encoding is used to encode files that contain one-, two-, and three byte Unicode characters.
Standard Java files can only accomodate one- and two-byte Unicode characters.
See this Wikipedia article for information about UTF-8.
Exercise: Show how to encode this string in UTF-8:
```
Greek letters: αβγ
```
Use the ASCII Table and Hex Digits Table.
Here are the details of encoding this string in UTF-8, which is the same as MUTF-8 because Greek letters are represented with 2-byte Unicode codes: UTF-8 Example.
Here is a Joel on Software article giving his opinions:
The Absolute Minimum Every Software Developer Must Know about Unicode and Character Sets (No Excuses!)
See this link for more information about MUTF-8 encoding:
https://source.android.com/devices/tech/dalvik/dex-format

More UTF-8 Examples

Find the UTF-8 representations for these two non-Latin characters: δ (Greek letter delta) and Щ (uppercase Cyrillic character shcha). Android uses this modified UTF-8 encoding system (MUTF-8) where up to three bytes may be encoded.
```
             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
```
In the Byte 1, Byte 2, and Byte 3 columns, x represents the binary bits of the Unicode encoding for the character; 0 and 1 represent the special UTF-8 encoding bits.
1. Find the UTF-8 representation for the Greek letter δ (lower case delta).
  1. Look up the Unicode code for δ in this document:
    https://www.unicode.org/charts/PDF/U0370.pdf
    The hex Unicode code is 03B4.
  2. Translate the hex code to binary:
```
  0    3    B    4
0000 0010 1011 0100   
```
  3. Because 03B4 is between 0080 and 07FF, use the Two Bytes row. Place the binary bits of the unicode code (represented by x in the table) into groups of five and six:
```
0000 0010 1011 0100
01010 110100  
```
  4. Add the UTF-8 encoding bits 110 and 10 from the Two Bytes row:
```
01010 110100
11001010 10110100
```
  5. Group the binary bits into groups of four and translate back to hex:
```
11001010 10110100
1100 1010 1011 0100 
  C    A    B    4
```
  Therefore the UTF-8 encoding for β is CAB4.
1. Find the UTF-8 representation for the Cyrillic letter Щ (upper case shcha).
  1. Look up the Unicode code for Щ in this document:
    https://www.unicode.org/charts/PDF/U0400.pdf
    Therefore the hex Unicode code is 0429.
  2. Translate the hex code to binary:
```
  0    4    2    9
0000 0100 0010 1001   
```
  3. Because 0429 is between 0080 and 07FF, use the Two Bytes row. Place the binary bits of the unicode code (represented by x in the table) into groups of five and six:
```
0000 0100 0010 1001   
10000 101001    
```
  4. Add the UTF-8 encoding bits 110 and 10 from the Two Bytes row:
```
10000 101001
11010000 10101001
```
  5. Group the binary bits into groups of four and translate back to hex:
```
11010000 10101001
1101 0000 1010 1001
  D    0    A    9
```
  Therefore the UTF-8 encoding for Щ is D0A9

Practice Problems

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

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.