Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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).
<?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>
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'
}
<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>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme using Material Design here. -->
</style>
</resources>
@iantheninja

This comment has been minimized.

Copy link

@iantheninja iantheninja commented Apr 30, 2015

hi..when my app is generated there is only one styles file...no v21 one..

@neilmcguigan

This comment has been minimized.

Copy link

@neilmcguigan neilmcguigan commented Jul 12, 2015

folder name should be "values-v21" not "values-21"

@mistypix

This comment has been minimized.

Copy link

@mistypix mistypix commented Jul 13, 2016

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

@RussianProgrammer

This comment has been minimized.

Copy link

@RussianProgrammer RussianProgrammer commented Mar 27, 2017

Nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment