Menu

How to set up your Android app project to use Material Design with AppCompat

Posted on , by Stephen

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/thewirelessguy.co.uk/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

AppCompat v21.+’s Theme.AppCompat extends Theme.Base.AppCompat which extends Theme.Platform.AppCompat which extends android:Theme.Material on 21+ devices (i.e. Android 5.0 Lollipop) so you only need to extend Theme.AppCompat to use Material theme if you are using the AppCompat v21 (or above) library.

First add compile ‘com.android.support:appcompat-v7:21.0.0’ to the dependancies section of your build.gradle file.

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'
}
view raw build.gradle hosted with ❤ by GitHub

Edit your styles.xml to add the style AppTheme.Base and have AppTheme extend AppTheme.Base. For example:

<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>
view raw styles.xml hosted with ❤ by GitHub

You don’t have to call it AppTheme.Base. You can call it whatever you want. You’ll need to change @color/colorPrimary, @color/colorPrimaryDark and @color/colorAccent to your own colour preferences in your colors.xml file.

There’s a great Github Gist of Material Design Colours at https://gist.github.com/cypressious/90355ac3e92c65908441

Next create a values-21 folder in the res folder if you don’t already have one. Then create or edit styles.xml in your res/values-v21 folder. AppTheme should extend AppTheme.Base instead of android:Theme.Material.Light. For example:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme using Material Design here. -->
</style>
</resources>
view raw styles21.xml hosted with ❤ by GitHub

If you extend android:Theme.Material.Light instead of AppTheme.Base then you’ll get an “IllegalStateException:You need to use a Theme.AppCompat theme (or descendant) with this activity” error.

Now you just need to set the theme as AppTheme in the 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>
view raw AndroidManifest.xml hosted with ❤ by GitHub