Multiple Accent Colors In a Project

An advantage of the HoloAccent themes is that you can further extend them, as you would do with the default Holo themes. We will use this technique to create several themes with different accent colors.

In the basic setup guide, it suggests to override the color resources to set the accent color. This works because these resources are referenced by the 'accentColor' and 'accentColorTranslucent' attributes in the theme. In stead, we will override the value of the attributes in each colored theme. It is less complicated than it sounds, let's tackle it step by step.

Create Themes With Different Colors

1 - Create a file called 'theme.xml' in the 'res/values' folder. Actually the file can have any name you want.

2 - For this example, we will create three different themes: ThemeRed, ThemeGreen, ThemeBlue. The content of 'themes.xml' is the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="ThemeRed" parent="Theme.HoloAccent.Light">
		<item name="accentColor">#ff0000</item>
		<item name="accentColorTranslucent">#66ff0000</item>
	</style>
	<style name="ThemeGreen" parent="Theme.HoloAccent.Light">
		<item name="accentColor">#00ff00</item>
		<item name="accentColorTranslucent">#6600ff00</item>
	</style>
	<style name="ThemeBlue" parent="Theme.HoloAccent.Light">
		<item name="accentColor">#0000ff</item>
		<item name="accentColorTranslucent">#660000ff</item>
	</style>
</resources>

Note that for each theme, the value of 'accentColor' is the same as 'accentColorTranslucent', but we add a '66' at the beginning. This is the opacity of the translucent color. Also, we extended the light version of HoloAccent but you can replace it by any of the available themes.

3 - Finally, we have to apply the themes to our activities in the 'AndroidManifest.xml' file.

We will imagine a simple application with three activities: MainActivity, SubActivity1 and SubActivity2. We will apply ThemeRed to the whole application so it will be the default theme. We will apply ThemeGreen to SubActivity1, and fianlly, ThemeBlue to SubActivity2. The 'AndroidManifest.xml' will look like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.example"
	android:versionCode="1"
	android:versionName="1" >

	<uses-sdk
		android:minSdkVersion="14"
		android:targetSdkVersion="19" />

	<application
		android:allowBackup="true"
		android:icon="@drawable/ic_launcher"
		android:label="@string/app_name"
		android:theme="@style/ThemeRed" >
		<activity android:name=".MainActivity" >
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity
			android:name=".SubActivity1"
			android:theme="@style/ThemeGreen" />
		<activity
			android:name=".SubActivity1"
			android:theme="@style/ThemeBlue" />
	</application>
</manifest>

Notice that the MainActivity doesn't explicitly specify a 'android:theme' attribute. This means that it will take the default value specified in the application: ThemeRed. Remember also that the activities have to be set up as indicated in the basic setup guide.

Alternative: Override On Code

This method is discouraged and it should only be used for quick testing or just to have some fun. By doing this, some elements that take the color from the theme will show the default value. For example, if you show a dialog from this activity, it will show a wrong accent color.

To apply this method, we will just need to change a bit the code that we add to the activity:

    private final AccentHelper mAccentHelper = new AccentHelper(Color.RED);
    @Override
    public Resources getResources() {
    	return mAccentHelper.getResources(this, super.getResources());
    }

The only thing we changed is the constructor of 'AccentHelper'. We pass the Color.RED value to it so the default accent will be overridden by the red color.