Android Material Design with AppCompat

by GarciaPL on Wednesday 6 January 2016

I just would like to show you how setup styles.xml and values-v21/styles.xml to use Material Design with AppCompat. First of all 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). Below you might found 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>

Then change your build.gradle to provide appropriate compileSdkVersion and buildToolsVersion.


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'
}

After that you can apply 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>

And also style for v21

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


Reference :  [1] https://gist.github.com/thewirelessguy/1875ddb114bda7407402