Android - Can't style ActionBar supporting API 16 to 22

Question

While coding a Spike for an application, I wanted to do a simple ActionBar styling that was backwards compatible with 4.1, whilst supporting Material in newer versions. Therefore I'm inheriting from Theme.AppCompat.Light. Using the new Material color conventions I have this colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="primary" type="color">#b56cb5</item>
    <item name="primary_dark" type="color">#663d66</item>
    <item name="accent" type="color">#ffffff</item>
</resources>

values/style.xml is defined as so:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:actionBarStyle">@style/CustomActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="CustomActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/primary</item>
</style>

While defining Material items inside the AppTheme, Android Studio conveniently generated values-21/style.xml for me:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
    <!-- action bar item to support older versions -->
    <item name="android:actionBarStyle">@style/CustomActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="CustomActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/primary</item>
</style>

Manifest is also correctly applying my AppTheme:

<application
        (...)
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            (...)
        </activity>
</application>

This all looks fine and dandy. However this is what I get when I run the app on 5.0.2 (API 21):

I won't even bother testing in my 4.4.2 device. What am I doing wrong? All tutorials online seem to do what I did.

Answer 1

Please follow the latest Material Design guidelines here:

http://www.google.com/design/ and https://developer.android.com/design/material/index.html.

You can use AppCompatv7 to support all of your devices from API 7 to API 22+.

Google Developer Chris Banes explains how to implement it:

https://chris.banes.me/2014/10/17/appcompat-v21/

And the official blog post:

http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html.