Apr 30, 2025 -- Notes

To Lecture Notes

IT 372 -- Apr 30, 2025

Review Questions

Add a TextView widget to a constraint layout. Change the font family of the widget using the Design Layout Editor. Check out these files that are modified:
```
res/activity_main.xml      res/font/font_name.(ttf | xml)
res/values/font_certs.xml  res/values/preloaded_fonts.xml
```
Answer: Use the Design Editor to select the fontFamily attribute. You can either use one of the predefined fonts,
Create an app named ShowSuit. Add a radiobutton group with four radio buttons and an ImageView widget to the ConstraintLayout. Set the text for the radio buttons to Club, Diamond, Heart, and Spade. Set up an onCheckedChangeListener event handler that changes the image of the imageview to club.png, diamond.png, heart.png, or spade.png, depending on the radiobutton that is clicked. Here is a zipfile of the suit images. Use an anonymous inner class to set up the event handler.
Answer: Copy the suit images files into the res/drawable folder. Here are the layout and activity files. Also, see the ShowSuit Example for a different implementation of this problem.
Set up a main activity with a Spinner containing the names of birds, and two Button widgets. The first button has the caption Add Bird; the second button has the caption Display Birds in ArrayList. When first button is clicked the selected bird in the spinner is added to the arraylist. When the second button is clicked, the birds arraylist is passed to a new activity, an output string is created from the birds in the arraylist, and the output string is displayed in a textview.
Answer: Here are the app files:
activity_main.xml strings.xml MainActivity.java
activity_show_birds.xml ShowBirdsActivity.java

Debugging Android Apps

What techniques do you use for debugging your Android apps?
Ans: (a) Write lines to the Logcat window with Log.i.
(b) Comment out source code lines and add them back in one by one to locate the line that causes the app to crash.
(c)Use the Android Debugger: put breakpoints in your code, which show up as maroon disks in the gray area to the left of the editor lines. Use the Debug 'app' button in the toolbar to the right to start the debugger. Step Over, Step Into, and Step Out buttons above the Debug Window at the bottom of Android Studio. Check the values of variables in the Variable Window. Here are, respectively, the Android Studio Debug 'app', Step Over, Step Into, and Step Out buttons:
Practice Problem: Set up the BreakfastBeverage app for ordering your breakfast beverage (inspired by PeaPod, the website for ordering groceries online). Here is a screen shot. Here are the layout and Java Activity files. Try out the Android Studio debugger on this BreakfastBeverage app.

Android Platform and Architecture

Practice Problem. Find the UTF-8 representations for two non-Latin characters. 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

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.

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.