May1 1, 2019 -- Notes

To Lecture Notes

IT 372 -- May 1, 2019

Review Questions

If the company domain is it372.cdm.depaul.edu and the application name is MyApp, what is the package name for the project?
Ans: edu.cdm.it372.myapp
What is the hint attribute for an EditText widget?
Ans: It is gray text displayed in the widget that tells the user what to enter.
Look at the PhoneButtons example. How do you set a style such as textSize that applies to all widgets?
Ans: You add a line like this to the app/src/main/res/values/styles.xml file:
```
<item name="android:textSize">30sp</item>
```
In a GridLayout, what are the important properties to set to position the widgets? Ans:
```
 rowCount  columnCount  layout_row  layout_column
layout_columnSpan   layout_rowSpan
```
In a Spinner widget, how do you add entries to the spinner?
Ans: Create an array in the app/src/main/res/values/strings.xml file:
```
 <array name="grades">
    <item>Grade 9</item>
    <item>Grade 10</item>
    <item>Grade 11</item>
    item>Grade 12</item>
</array>
```
Then assign grades to the entries attribute of the spinner:
```
android:entries="@string/grades"
```
How does ConstraintLayout differ from LinearLayout or GridLayout?
Ans: ConstraintLayout stacks widgets vertically or horizontally.
GridLayout positions widgets in a rectangular grid.
ConstraintLayout uses constraints to the edge of the layout or to other widgets to position a widget.

Some ConstraintLayout Videos

Building User Interfaces with ContraintLayout
Wojtek Kalecinski (4:00)
https://www.youtube.com/watch?v=XamMbnzI5vE
Android ConstraintLayout in Less than 7 Minutes
Round of Insight (6:52)
https://www.youtube.com/watch?v=2FOFd77o7eg
Mastering ConstraintLayout
Rebecca Franks (47:23)
https://www.youtube.com/watch?v=rzmB3UxxhaA

Practice with ConstraintLayout

Create an Android Studio Project named CLPractice (ConstraintLayout Practice).
Go to the Design Window

Change the lines in the file app/src/main/res/values/styles.xml:

<style name="AppTheme" 
    parent="Theme.AppCompat.Light.DarkActionBar">

Change them to

<style name="AppTheme" 
    parent="Base.Theme.AppCompat.Light.DarkActionBar">

Delete the TextView widget with the "Hello, World!" text.
Drag a Button onto the layout from the Palette.
Set the Default Margin to 50dp with the Default Margin Button.
Resize the button with the blue resizing handles located on the corners of the button:
You can change the textSize attribute of the button or you can add this line to the in the style file app/src/main/res/values/styles.xml:
```
<item name="textSize">40dp</item>
```
In ConstraintLayout a widget can be set to a fixed size, constraints can be used to allow a widget to expand or shrink, depending on the layout.
Set the layout_width and layout_height attributes of the button to wrap_content.
Now set the layout_width to match_contstraints, which changes with width to 0dp. Then drag the contstraint handle of the button to the left border of the constraint layout. The contstraint handles are the blue circles with white interior centered on the edges of the button.
You can also use the Create a connection button in the Attributes Window. Click View fewer attributes above the Attributes Window so that you see these buttons:

They include the Create a connection and Wrap Content buttons.
Add vertical constraints that connect to the top and the bottom of the constraint layout. You can use the Constraint handles on the button or the Create a connection buttons in the Attributes Window.
The connections diagram in the Attributes Window now looks like this:
Find the horizontal and vertical bias sliders to the left and to the bottom of the diagram. Change the positions of the sliders to change the horizontal and vertical bias.

Go to the Layout Text Window. Find the values of these attributes for the button:

app:layout_constraintBottom_toBottomOf
app:layout_constraintEnd_toEndOf
app:layout_constraintStart_toStartOf
app:layout_constraintTop_toTopOf
app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

TextMessage Prototype

Create an Android Studio project named TextMessage.
Leave the layout as constraint layout.
Drag a TextView widget onto the upper left corner of the layout. Set the text to phone_number
Select the Text Tab of the palette. Drag a Number widget from the palette to the right of the text view. A Number widget is an edit text with its inputType attribute set to number.
Set the width and height of the text view to wrap_content.
Click the Infer Constraints button.
Run the app to check the layout.
Drag an EditText widget that accepts plain text from the palette onto the layout.
Set the constraints to position the widget as you wish. This might take some experimentation.
Set the id of this last EditText widget to message.
Run the app to test your layout.
Drag a ViewText widget onto the layout above the message edit text. Set its constraints.
Place a button at the bottom of the layout with text Send Message. Set constraints to attach it to the bottom of the layout.
Run the app.
We won't add any Java activity code to this app. We are only interested in how to set up a layout with ConstraintLayout.

StudentEntryForm Example

Build the app of the StudentEntryForm Example.

Array Adapters

Practice Problem: How can you add items programatically to a Spinner widget?
Hint: use an ArrayAdapter object.
Ans: Add a Spinner widget to the layout, with id set to spinner1. Then
1. place the array of Integer objects to display in the spinner in an array list,
2. set up an ArrayAdapter object that connects the spinner to the array list.
Here is the Java code:
```
// Set up array list.
ArrayList<Integer> arrList = new ArrayList<Integer>( );
for(int n = 1001; n <= 1005; n++) {
    arrList.add(n);
}

// Set up array adapter.
ArrayAdapter<Integer> adapter = new ArrayAdapter<Integer>(
    this, android.R.layout.simple_list_item_1, arrList);
spinner1.setAdapter(adapter);
```
Practice Project: ChineseHoroscope
1. Input a year of birth using a Spinner widget. Use an array adapter to load the years into the spinner.
2. Determine the Chinese horoscope animal corresponding to the year. The animal number can be obtained from year % 12.
3. Display the animal in a TextView widget.

More Android Widgets

Look at this reference document: More Android Widgets