Task 6: Updating the appearances of the buttons and the TextView

You have created the basic layout of your app, but let’s try customizing its appearances.

In colors.xml, change the value of screenBackground to #2196F3, which is a blue shade in the Material Design palette.
Add a new color named buttonBackground. Use the value #BBDEFB, which is a lighter shade in the blue palette.

Remove the background color of TextView (using Attributes panel or editing XML code). By doing so, the background becomes transparent.
Increase the size of the TextView to 72dp and change the font-family of it to sans-serif (if it’s not already)
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.)
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.
Make sure the layout_width is wrap_content, and the horizontal bias is 50 (app:layout_constraintHorizontal_bias="0.5" in XML).

If you completed all the steps until now, the app should look like this.