Lab 9

🖥 Lab 9: Customizing the Look and Feel of Our Application

Let’s make our app look a little better by leveraging the Android resource system.

 

📝 Objectives

1. Define new Color resources to customize your app theme

   1. Define these colors within res/values/colors.xml
   2. The actual color values don't matter much

2. Update the primary, and secondary colors of your app's theme using the newly created Color resources

   1. The theme should be defined within themes.xml
   2. You likely will see 2 versions of themes.xml; one for light more and one for dark mode
   3. Deploy your app to observe the updated theme

3. If you can, change your device to Dark Mode and redeploy your app

   1. Notice that it likely doesn't look how you might expect

4. Update the values-night version of your app's theme with your custom colors

5. Add the following values to both the Light and Dark Themes

   1. colorSurface
   2. backgroundColor

6. Update each fragment so its background color uses ?backgroundColor and pulls from the Theme

   1. ex android:background="?backgroundColor"

7. Download a custom png icon for the Twitter menu item in your Toolbar

   1. Can find icons here https://www.flaticon.com/

8. Create a new set of icons from the downloaded Twitter image

   1. Right-click on res directory, and select New -> Image Asset
   2. For "Icon Type`, select "Action Bar and Tab Icons"
   3. For "Asset Type" select "Image"
   4. Select the desired Twitter image in the "Path" field
   5. Name your icon ic_twitter and complete the creation process
   6. Update our menu item in main_toolbar.xml to show the icon in the Toolbar if there's room by adding app:showAsAction="ifRoom"

9. Replace all menu item strings with string resource values

   1. This requires replacing any hardcoded string in the menu file with string resources using @string/<resource name>

10. Apply the following text Styles to the TextViews in NoteDetailFragment

    1. TextAppearance.MaterialComponents.Headline3
    2. TextAppearance.MaterialComponents.Headline4
    3. TextAppearance.MaterialComponents.Body1

 

✨ Challenges

Customize your app icon

1. Create a custom app icon using the "Image Asset" creation wizard using an "Icon Type" of launcher
2. Re-deploy your app to observe the new icon in your launcher.

Support landscape orientation

Provide an alternative horizontal layout for CreateNoteFragment and/or NoteDetailsFragment.

To do this, you'll need to create alternative layout resources for the land layout resource qualifier. Right-click res, go to New -> Android Resource File and choose a layout resource type, and add the landscape resource qualifier by selecting it, and clicking the >> icon to move it into the applied qualifiers list.

Customize your app's typography

Customize the typography of your app by setting custom text styles in your theme.

 

🖥 Lab 9 Hints: Customizing the Look and Feel of Our Application

 

💡 Helpful Resources

• Overview of App Resources
• Configuration-Based Resource Naming
• Themes vs Styles
• String Resources Docs
• Color Resources Docs
• Dimension Resources Docs
• Style Resources Docs
• Boolean Resources Docs
• Drawable Resources Docs
• MaterialComponents Theming Getting Started Guide
• Material.io Color System Guide

 

💡 What other Themes are available?

There are a lot of possible Themes to choose to apply to your application. The two flavors you're mostly likely to run across include:

1. AppCompat
2. MaterialComponents

When starting a new Android app, it's best these days to use the MaterialCompoents library, and by extension, to use Theme.MaterialComponents as a starting point for your own custom app theme.

Check out the Getting started with Material Components for Android README for more info.

 

💡 How to pick colors for my app theme?

Check out the Material.io Color tool

 

💡 How are my Theme colors applied to my app?

The colors applied to our application theme make up the default set of colors that our Views will pull from for their default styling.

This is especially true when using Views from the Material Components library which do a great job with default theming.

The Material.io site has some great resources for better understanding how individual Theme colors are used. A few of the most common colors include

1. colorPrimary: The color displayed most frequently across your app’s screens and components
2. colorPrimaryVariant: A tonal variation of the primary color. For light-mode themes, this is usually a slightly darker variant of colorPrimary
3. colorOnPrimary: A color that passes accessibility guidelines for text/iconography when drawn on top of the primary color.
4. colorSecondary: The secondary branding color for the app, usually an accented complement to the primary branding color.

 

💡 How to get the backgroundColor property from the Theme?

If you want to use the Theme's current backgroundColor property for you own View, say for example the background of a Fragment container, you can reference the property as android:background="?backgroundColor"