- 3.1 Introduction
- 3.2 Test-Driving the Tip Calculator App
- 3.3 Technologies Overview
- 3.4 Building the GUI
- 3.5 Default Theme and Customizing Theme Colors
- 3.6 Adding the App's Logic
- 3.7 AndroidManifest.xml
- 3.8 Wrap-Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
3.5 Default Theme and Customizing Theme Colors
Each app has a theme that defines the default look-and-feel of the standard views you use. The theme is specified in the app’s AndroidManifest.xml file (Section 3.7). You can customize aspects of the theme, such those that define an app’s color scheme, by defining style resources in the styles.xml file located in the in the app’s res/values folder.
3.5.1 parent Themes
The style.xml resource file contains a style with the name "AppTheme" that’s referenced from the app’s AndroidManifest.xml file to specify the app’s theme. This style also specifies a parent theme, which is similar to a superclass in Java—the new style inherits its parent theme’s attributes and their default values. Just as in a Java subclass, a style can override parent theme attributes with values customized for specific apps. A company might do this, for example, to use the company’s branding colors. We’ll use this concept in Section 3.5.2 to customize three colors used in the app’s theme.
As we mentioned previously, Android Studio’s app templates now include support for the AppCompat libraries that enable you to use newer Android features in older Android versions. By default, Android Studio sets the parent theme to
Theme.AppCompat.Light.DarkActionBar
one of several predefined themes from the AppCompat library—apps that use this theme have a light background, except for the dark app bar at the top of the app. Each AppCompat theme uses Google’s material design recommendations to style your apps’ GUIs.
3.5.2 Customizing Theme Colors
Section 3.3.11 discussed where a theme’s primary, dark primary and accent colors are applied in an app’s on-screen elements. In this section, you’ll use the new Android Studio Theme Editor to change the app’s primary, dark primary and accent colors, thus overriding the values of the android:colorPrimary, android:colorPrimaryDark and android:colorAccent theme attributes shown in Fig. 3.6. These are three of many theme attributes you can override. For the complete list, visit:
http://developer.android.com/reference/android/R.attr.html
)
Fig. 3.6 | Theme attributes for the primary, primary dark and accent colors.
Modifying the Theme’s Primary, Dark Primary and Accent Colors
To customize the colors:
Open styles.xml. In the editor’s upper-right corner, click the Open editor link to display the Theme Editor (Fig. 3.7) showing the current colors for colorPrimary (dark blue), colorPrimaryDark (a darker shade of colorPrimary) and colorAccent (bright pink)—these are the default colors specified in Android Studio’s Empty Activity app template. For this app, we’ll change colorPrimary and colorPrimaryDark to lighter blues and change colorAccent to orange.
Fig. 3.7 | Theme Editor shows styled view previews on the left and theme attributes on the right.
Customize the app’s colorPrimary value by clicking its color swatch (Fig. 3.7) to display the Resources dialog (Fig. 3.8). In the dialog, click the Material Blue 500 color swatch, then click OK to change colorPrimary’s value—hovering the mouse cursor over a color swatch displays its color name in a tooltip. The number 500 represents a particular shade of the Material Blue color. Shades of each color range from 50 (a light shade) to 900 (a dark shade)—you can view samples of each color’s shades at
https://www.google.com/design/spec/style/color.html#color-color-palette
Fig. 3.8 | Selecting the Material Blue 500 color swatch for colorPrimary.
Next, click the colorPrimaryDark color swatch in the Theme Editor to display the Resources dialog. The Theme Editor recognizes the new colorPrimary value and automatically displays a color swatch containing the recommended darker colorPrimary shade you should use for colorPrimaryDark—in this case, Material Blue 700. Click that color swatch (Fig. 3.9), then click OK.
Fig. 3.9 | Selecting the Material Blue 700 color swatch for colorPrimaryDark.
Next, click the colorAccent color swatch in the Theme Editor to display the Resources dialog. Again, the Theme Editor recognizes that you changed the colorPrimary value and displays swatches for various complementary accent colors. In the dialog, click the Orange accent 400 color swatch, then click OK to change colorAccent’s value (Fig. 3.10), then click OK.
Fig. 3.10 | Selecting the Orange accent 400 color swatch for colorAccent.
)
)
)
)
You’ve now completed the app’s design, which should appear as shown in Fig. 3.11.
)
Fig. 3.11 | Completed design.
3.5.3 Common View Property Values as Styles
As you’ll see in later apps, style resources can define common property values that should be applied to multiple views. You apply a style resource to a given view by setting its style property. Any subsequent changes you make to a style are automatically applied to all views using the style. For example, consider the tipTextView and totalTextView that we configured identically in Step 11 of Section 3.4.5. We could have defined a style resource specifying the layout:gravity, background, gravity, padding and elevation properties’ values, then set both TextViews’ style properties to the same style resource.