Setting up styles.xml and values-v21/styles.xml to use Material Design with AppCompat. Rename styles21.xml as styles.xml and place in your res/values-v21 folder (you may need to create a values-v21 folder if you don't already have one).

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="uk.co.thewirelessguy.myappname" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="uk.co.thewirelessguy.myappname.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.1"

    defaultConfig {
        applicationId "uk.co.thewirelessguy.myappname"
        minSdkVersion 9
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            runProguard false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.0'
}

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base"/>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->

        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/colorPrimary</item>

        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
        <item name="colorAccent">@color/colorAccent</item>

        <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight & colorSwitchThumbNormal. -->
    </style>

</resources>

styles21.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme using Material Design here. -->
    </style>
</resources>

just to make it clear for someone who might get confused with the usage of styles.xml, according to this official document: (https://developer.android.com/training/material/compatibility.html), there are two main reasons for using two styles.xml files.

1. Define Alternative Styles,
2. Provide Alternative Layouts.

now ,if the aim is to provide alternative styles, you have to inherit from a different material theme for v-21 styles.xml (eg android:Theme.Material.Light.DarkActionBar)
but if the aim is only to provide alternative layouts,we should define base styles in res/values/ and inherit from those in res/values-v21/ (as you have mentioned). this is to avoid duplication of code.

but the problem is we can't use material design theme for appcompatactivity. so why is this not mentioned in the official document?
http://stackoverflow.com/questions/32510025/android-material-design-with-appcompatactivity

Nice