The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Material Design Basics

We have already been exposed to Theme.Material as part of this book, such as with the action bar.

Android 5.0+, combined with Theme.Material, gives you a lot of capabilities tied to Google’s Material Design aesthetic. In this chapter, we will cover some basic Material Design capabilities that will affect your Theme.Material app on Android 5.0+, starting with color.

Your App, in Technicolor!

Some developers want to change the colors used by their app to match some specific color or color palette. In some cases, the colors in question are tied to the app’s branding. In other cases, the developer simply wants something different than the stock colors you get from something like Theme.Holo or Theme.Holo.Light.

Creating custom themes to apply colors to Theme.Holo and kin was enough of a pain that a separate theme generator was created for it, independent of the generator for custom action bar colors.

Affecting color changes in your Theme.Material-based Android app is vastly simplified — both for the action bar and the widgets — courtesy of Theme.Material’s tinting options.

Basic Tinting Options

In the chapter on the action bar, we saw how to set up a custom theme based on Theme.Material that had custom color tinting rules that affected the action bar:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppTheme" parent="android:Theme.Material">
    <item name="android:colorPrimary">@color/primary</item>
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

At that time, we focused on the effects that these tints had on the action bar itself. However, with Theme.Material, not only do the tints affect the action bar, but they affect the widgets themselves.

The BasicMaterial directory contains clones of some of the basic widget samples outlined earlier in this book, where each includes the custom theme demonstrated for the action bar.

In some cases, the custom tints are not normally visible, such as with a button:

Custom Material Theme for a Button
Figure 273: Custom Material Theme for a Button

However, when you tap the button, the animated “ripple” effect shown on the button will use your accent color.

In other cases, the accent color will show up in a more “steady state”, such as in a checked CheckBox:

Custom Material Theme for a CheckBox
Figure 274: Custom Material Theme for a CheckBox

Similarly, your accent color shows up in things like:

Custom Material Theme for an EditText
Figure 275: Custom Material Theme for an EditText

Custom Material Theme for a RadioButton
Figure 276: Custom Material Theme for a RadioButton

Custom Material Theme for a Switch
Figure 277: Custom Material Theme for a Switch

Official Google-Approved Colors

Of course, you are welcome to pick whatever colors you like for your theme.

Google has its opinion of what it thinks are good ideas.

As part of the Material Design documentation, you will find a “Color palette” page that outlines possible colors to use.

A Redditor has also published an Android color resource file that contains all of the colors outlined in the Material Design guide.

There is also the material palette site, which generates a color resource file based upon colors that you select from a large grid of color swatches.