Apr 28, 2025 -- Notes

IT 372 -- Apr 28, 2025

Review Exercises

How do you add a new activity to an Android project?
How are the Intent and a Bundle objects used?
Create an Android app named Greeter with three activities named MainActivity, Greeter2Activity, and Greeter3Activity. MainActivity displays the greeting
```
Hello, how are you?
Click for next activity.
```
Greeter2Activity displays the message
```
I'm fine, thank you, and you?
Click for next activity.
```
Greeter3Activity displays the message
```
I'm fine too, thanks.
Click for main activity.
```
Implement the onClick event handlers with lambda functions (Method 4).
Ans: Here are the source code files:
activity_main.xml MainActivity.java
activity_greeter2.xml Greeter2Activity.java
activity_greeter3.xml Greeter3Activity.java
What does a ConstraintLayout constraint look like?

Writing to the Logcat Window

Recall that System.out.println writes to the Logcat window.
A preferred way to write to the Logcat window is using the Log.i (informational) method. Here is a sample Log.i method call:
```
Log.i("001", "This is a test.");
```
"001" is the tag; "This is a test." is the informational message.
Before running the an app with calls to Log.i, check that the log filter is set to package:mine. Change it by clicking the funnel shaped Show History icon on the top of the Logcat window if necessary. Clear the Logcat window with the trash can Clear Logcat icon on the left of the Logcat window before running the app.

These are the available Log methods for writing to the Logcat window:

Method	Signature	Meaning
Log.d	(String, String)	Debug
Log.e	(String, String)	Error
Log.i	(String, String)	Information
Log.v	(String, String)	Verbose
Log.w	(String, String)	Warning

Create a new Android app. Put this statement at the end of the onCreate method:
```
Log.i("001", "This is a test.");
```
Run the app; find the message with tag "001" in the Logcat window.

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 Problems

Create an Android app with project name DonorInfo and two activities MainActivity and DisplayActivity. The MainActivity layout should have two EditText widgets for entering donor name and donation amount and a submit button. Use an ArrayList collection to record the names and amounts. When the button is clicked, record the name and amount in the arraylist, then display all of the information in the array in an EditText widget located in the DisplayActivity. Create a string to put in the Intent object, something like this:
```
"Tom,2000.00;Anna,1500.00;Terry,2300"
```
Answer: Here are the resulting source code files:
activity_main.xml MainActivity.java activity_display.xml
DisplayActivity.java Donation.java strings.xml
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.

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.