Select Page

One of the most exciting things to happen to Android in some time (to me at least) is the addition of new base color attributes in the Material theme. If you have ever tried to customize the colors of the Android action bar, status bar, or navigation bar then you understand the complexity and aggravation involved.

In this tutorial we will setup the basic color themes with an awesome purple hue from the new Material Theme design guidelines.

awesomepurple

Starting with Android L developers no longer have to generate a huge batch of drawables using tools like the Android Action Bar Style Generator to customize something which should be very simple. With the elimination of drawables as a dependency on Action Bar styling, developers also gain the ability to easily change the colors of system components dynamically to match whatever is currently displayed on screen.

No more of this (for L anyway):

actionbarnomore

The New Hues

The Material theme gives designers more color options than they had in Holo. There are 19 hues instead of 5. There are also a fairly straight forward set of design guidelines for picking a set of colors for your app.

morehues

What Colors Do We Need?

The Material Theme adds 5 new color values that can be easily set in your application. For this demo we will focus on the textColorPrimary, colorPrimary, colorPrimaryDark, and navigationBarColor attributes. We will also need to select a default textColor.

ThemeColors

Selecting Colors

Selecting the basic set of colors for your app is as simple as picking one of the available hues from the design guide as your primary color. The 500 level color will be your primary color.

For the demo application we will use the Deep Purple hue thus our primaryColor will be #673ab7 . From there the guidelines recommend taking the 700 color for your dark primary. You are own your own for selecting the accent color. For this demo the accent color will come from the Amber hue. The 500 color is a good accent choice but there can be some flexibility in this regard.

The suggestion to take the 500 primary and 700 dark colors is a safe suggestion but designers and those with branding requirements will likely be more flexibile in their color choices.

Our colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources> 
    <color name="primary">#673ab7</color>
    <color name="primary_dark">#512da8</color>
    <color name="accent">#ffc400</color>
    <color name="text_primary">#D9FFFFFF</color>
    <color name="text_secondary">#D9000000</color>
</resources>

Text colors are a little trickier as there is a new emphasis on using percentages of color to give you your final color value. The design guidelines say to choose a text color that is 87% or the selected color. Using that as a selection criteria we change the alpha of the black and white text colors. This also works if you choose to use an accent color as a text color.

Applying the colors is as simple as placing them in your theme:

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

Wrap-up

In the next part of this series we will implement the RecyclerView (a ListView replacement) and CardView widgets for our initial country list.

Source: Github
Additional Resources: Google Blog

Part 1 of the series can be found here