May 1, 2024 -- Notes

To Lecture Notes

IT 372 -- May 1, 2024

Review Questions

What are the options for writing to the Logcat window with the Log class?
How is an Intent object used?
Set up a ConstraintLayout form to input grocery item data with these fields: description (String), code (int), and price (double). Also include a checkbox widget for on sale. When the Submit Grocery Item button is clicked, contatenate the information to the String variable groceryItems that is displayed on a new activity. Answer:
     activity_main.xml MainActivity.java
     activity_display_items.xml DisplayItemsActivity.java
When the virtual device is rotated, save the groceryItems variable in a Bundle object so that this variable can be restored when the activity is recreated after the activity is destroyed due to device rotation.
Answer: Main activity after adding onSaveInstanceState method and statements in onCreate to restore bundle.
     MainActivity.java

The Android Studio IDE

Locate these Android Studio windows:
Project Code Layout Design Layout Text Attributes
Palette Component Tree Terminal Logcat
Locate these buttons in the Main Menu (upper left) by hovering over them with the mouse and reading the tooltips.
    Build Project   |   Run 'app'   |   Debug |   Stop 'app' |
    Sync Project with Gradle Files   | Device Manager |
    SDK Manager | Project Settings |
Locate these buttons above the Layout Design Window:
Select Design Surface | Orientation for Preview |
Zoom In | Zoom to Fit Screen

Practice Problem

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.

The weight Attribute

The android:layout_weight attribute controls the relative amount of space that a widget takes up in a linearlayout.
Create a linear layout with three buttons with captions "BUTTON1", "BUTTON2", "BUTTON3" and layout_weight values 1, 2, and 3.
Practice Problem: Match the emulator screen shots 1, 2, 3, 4, 5 with the linear layouts a, b, c, d, e.
Answer: 1 c; 2 b; 3 a; 4 e; 5 d.

Android Platform

Some Details about the Android Platform.
To view files on the virtual device, use the Device Explorer.

Debugging Android Apps

What techniques do you use for debugging your Android apps?
Ans: (a) Write lines to the Logcat window with Log.i or to the Run window with System.out.println.
(b) Comment out 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.