With the base theme squared away, it is time to customize the attributes of BeatBox’s AppTheme.

In the styles.xml file, you will see three attributes. Update them to match Listing 22.9.

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/colorPrimary red</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark dark_red</item>
    <item name="colorAccent">@color/colorAccent gray</item>
</style>

These theme attributes look similar to the style attributes that you set up earlier, but they specify different properties. Style attributes specify properties for an individual widget, such as the textStyle that you used to bold the button text. Theme attributes have a larger scope: They are properties that are set on the theme that any widget can access. For example, the toolbar will look at the colorPrimary attribute on the theme to set its background color.

These three attributes have a large impact. The colorPrimary attribute is the primary color for your app’s brand. This color will be used as the toolbar’s background and in a few other places.

colorPrimaryDark is used to color the status bar, which shows up at the top of the screen. Typically colorPrimaryDark will be a slightly darker version of your colorPrimary color. Status bar theming is a feature that was added to Android in Lollipop. Keep in mind that the status bar will be black on older devices (no matter what the theme specifies). Figure 22.5 shows the effect of these two theme attributes on BeatBox.

Figure 22.5  BeatBox with AppCompat color attributes

Finally, you set colorAccent to a gray color. colorAccent should contrast with your colorPrimary attribute; it is used to tint some widgets, such as an EditText.

You will not see the colorAccent attribute affect BeatBox because Buttons do not support tinting. You still specify colorAccent because it is a good idea to think about these three color attributes together. These colors should mesh, and the default colorAccent attribute from your parent theme may clash with the other colors that you specified. This sets you up well for any future additions.

Run BeatBox to see the new colors in action. Your app should look like Figure 22.5.