Task 6: Update Appearance

• Step 1: Add new color resources

  • Now that the layout of your app is taken care of, we can focus on the appearance and aesthetics of the app!

  • Navigate to Values Folder ->> Res Folder ->> Colors.xml file in your directory.

  • Within this Colors.xml file, change the value of the screenBackground property to hex code #2196F3 which is a shade of Blue.

• Step 2: Add a background color for the button

  • Then, add a new color property and name it buttonBackground, and set its value to hex code #BBDEFB,a lighter shade of Blue. Like so:

  • ​

​

​

• Now, in the fragment_first.xlm file, add a background color to each of the buttons:

• Step 3: Changer Margins of the left and Right Buttons

  • In the fragment_first.xml file the button is contained in, in split view, click on the component tree, and click on the button_first component. On the right, the attributes should display the layout like so:

​​

​

​

​

​

​

​

​

• ​

  • Type in 24 in the left margin field

• Step 4: Update the appearance of the TextView:

  • Remove the background color of the TextView by removing the android:background attribute from the XML code.

  • Be mindful that when you remove the background, it becomes transparent

  • Increase the TextView text size to 72sp like so:

​

​

​

•  

  • Add an app:layout_constraintVertical_bias property to the TextView element, to reposition of the view upwards so that it is evenly spaced vertically in the screen like so:

​

​

​

​

• ​

  • Lastly, make sure the app:layout_constraintHorizontal_bias property is set is set to 0.5 in the XML file. If there is no horizontal constraint property, create it like so: app:layout_constraintHorizontal_bias = “0.5”

• Step 5: Run your App!

  • If you followed up the steps up till now and run your app, this is what it should look like:

​

​

​

​

​

 

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

• ​

  • If it looks a bit different, no worries! You may have used different colors and/or fonts.