Task 5: Update the appearance of the buttons and the TextView

Step 1: Add new color resources

1. In colors.xml, change the value of screenBackground to #2196F3, which is a blue shade in the Material Design palette.

2. Add a new color named buttonBackground. Use the value #BBDEFB, which is a lighter shade in the blue palette.

<color name="buttonBackground">#BBDEFB</color>

Step 3: Update the appearance of the TextView

1. Remove the background color of the TextView, either by clearing the value in the Attributes panel or by removing the android:background attribute from the XML code. When you remove the background, the view background becomes transparent.

2. Increase the text size of the TextView to 72sp.

android:textSize="72sp"

3. Change the font-family of the TextView to sans-serif (if it's not already).

4. Add an app:layout_constraintVertical_bias property to the TextView, to bias the position of the view upwards a little so that it is more evenly spaced vertically in the screen. Feel free to adjust the value of this constraint as you like. (Check in the design view to see how the layout looks.)

app:layout_constraintVertical_bias="0.3"

5. You can also set the vertical bias using the Constraint Widget. Click and drag the number 50 that appears on the left side, and slide it upwards until it says 30. 

Tip: Using the bias attribute instead of margins or padding results in a more pleasing layout on different screen sizes and orientations.

• If a view is constrained to other views on both its top and bottom edges, use vertical bias to tweak its vertical position.

• If a view is constrained on both its left and right edges, use horizontal bias to tweak its horizontal position.

6. Make sure the layout_width is wrap_content, and the horizontal bias is 50 (app:layout_constraintHorizontal_bias="0.5" in XML).