Themes across Android versions
Posted by Chainfire on 03-01-2012 at 13:10:00 - Comments: 136 - Views: 39569
Tags: Android Developer tools
Tags: Android Developer tools
This article unveils the secret of having your app's theme look consistent with the rest of the device's UI across all Android versions.
I don't often post pieces of code, but I thought this was an interesting enough subject to warrant a post. It's not really code, though.
If you've built a few apps, you've probably run into some theming issues. How do you get your app to have the standard OS look-and-feel across the different Android versions?
It's not difficult, but to have it look good on all current Android versions does require us to build the application for Android 4.0 (API level 14). Luckily, due to the introduction of the DeviceDefault theme, we will not have to upgrade the API level again in the future when a new theme comes out - it will now look good automatically.
We still have to cover the Honeycomb (Holo) and pre-Honeycomb (Black) cases, though. We do so by creating a new theme, and having it choose between device defaults by using API selectors. We will define three themes, the standard theme, a NoTitleBar(/NoActionBar) theme, and a Fullscreen theme.
If you modify your app in the way described here, standard components used by your activities will always look consistent with the rest of the device. Prior to Ice Cream Sandwich, OEMs usually skinned by overwriting the default skins, while in Ice Cream Sandwich and newer OEMs will modify the DeviceDefault skin. Note that on this API level you can still choose to use the Holo theme - and that Holo theme will actually look the way Google designed it, not OEM-specific.
Step 1: Changing Android API level
In Eclipse, right click on your project and go to Properties. Select the Android section, put a mark next to "Android 4.0" and click Apply.
If "Android 4.0" is not listed, make sure you install the needed SDK parts (Eclipse: Windows -> Android SDK Manager).
Now, open AndroidManifest.xml and make sure your <uses-sdk android:minSdkVersion="x" /> is still set to the minimum Android version you wish to support.
Step 2: Pre-Honeycomb theme (Black)
On Pre-Honeycomb Android devices, we'll use the Black theme, which is standard on most devices. We do so by creating a file called styles.xml in the res/values folder:
Step 3: Honeycomb theme (Holo)
On Honeycomb we want to be using the Holo theme available since Android 3.0 (API level 11). To do this, again we create a styles.xml file, but this time in the res/values-v11 folder:
You might need to create that res/values-v11 folder. The v11 part is called an API selector. The styles.xml file present in this folder will override the styles.xml file present in the res/values folder if-and-only-if the API level of the device is 11 or higher.
Step 4: Post-Honeycomb theme (DeviceDefault)
On Ice Cream Sandwich and beyond, we will want to use the DeviceDefault theme, introduced in Android 4.0 (API level 14). This will ensure your app will look consistent with the rest of the device's user interface. We could keep using Holo, but prior to ICS OEMs modified the Holo theme to their liking, while on ICS and newer Holo will be Google standard. So if the OEM has changed the theme on ICS, and you are using Holo, your app will not look consistent with the rest of the device!
Again, we create a styles.xml file, this time for API level 14, so in the res/values-v14 folder:
I don't often post pieces of code, but I thought this was an interesting enough subject to warrant a post. It's not really code, though.
If you've built a few apps, you've probably run into some theming issues. How do you get your app to have the standard OS look-and-feel across the different Android versions?
It's not difficult, but to have it look good on all current Android versions does require us to build the application for Android 4.0 (API level 14). Luckily, due to the introduction of the DeviceDefault theme, we will not have to upgrade the API level again in the future when a new theme comes out - it will now look good automatically.
We still have to cover the Honeycomb (Holo) and pre-Honeycomb (Black) cases, though. We do so by creating a new theme, and having it choose between device defaults by using API selectors. We will define three themes, the standard theme, a NoTitleBar(/NoActionBar) theme, and a Fullscreen theme.
If you modify your app in the way described here, standard components used by your activities will always look consistent with the rest of the device. Prior to Ice Cream Sandwich, OEMs usually skinned by overwriting the default skins, while in Ice Cream Sandwich and newer OEMs will modify the DeviceDefault skin. Note that on this API level you can still choose to use the Holo theme - and that Holo theme will actually look the way Google designed it, not OEM-specific.
Step 1: Changing Android API level
In Eclipse, right click on your project and go to Properties. Select the Android section, put a mark next to "Android 4.0" and click Apply.
If "Android 4.0" is not listed, make sure you install the needed SDK parts (Eclipse: Windows -> Android SDK Manager).
Now, open AndroidManifest.xml and make sure your <uses-sdk android:minSdkVersion="x" /> is still set to the minimum Android version you wish to support.
Step 2: Pre-Honeycomb theme (Black)
On Pre-Honeycomb Android devices, we'll use the Black theme, which is standard on most devices. We do so by creating a file called styles.xml in the res/values folder:
Code
#
1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
<style
4
name="Theme.Chainfire"
5
parent="android:Theme.Black">
6
</style>
7
<style
8
name="Theme.Chainfire.NoTitleBar"
9
parent="android:Theme.Black.NoTitleBar">
10
</style>
11
<style
12
name="Theme.Chainfire.Fullscreen"
13
parent="android:Theme.Black.NoTitleBar.Fullscreen">
14
</style>
15
</resources>
Step 3: Honeycomb theme (Holo)
On Honeycomb we want to be using the Holo theme available since Android 3.0 (API level 11). To do this, again we create a styles.xml file, but this time in the res/values-v11 folder:
Code
#
1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
<style
4
name="Theme.Chainfire"
5
parent="android:Theme.Holo">
6
</style>
7
<style
8
name="Theme.Chainfire.NoTitleBar"
9
parent="android:Theme.Holo.NoActionBar">
10
</style>
11
<style
12
name="Theme.Chainfire.Fullscreen"
13
parent="android:Theme.Holo.NoActionBar.Fullscreen">
14
</style>
15
</resources>
You might need to create that res/values-v11 folder. The v11 part is called an API selector. The styles.xml file present in this folder will override the styles.xml file present in the res/values folder if-and-only-if the API level of the device is 11 or higher.
Step 4: Post-Honeycomb theme (DeviceDefault)
On Ice Cream Sandwich and beyond, we will want to use the DeviceDefault theme, introduced in Android 4.0 (API level 14). This will ensure your app will look consistent with the rest of the device's user interface. We could keep using Holo, but prior to ICS OEMs modified the Holo theme to their liking, while on ICS and newer Holo will be Google standard. So if the OEM has changed the theme on ICS, and you are using Holo, your app will not look consistent with the rest of the device!
Again, we create a styles.xml file, this time for API level 14, so in the res/values-v14 folder:
Code
#
1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
<style
4
name="Theme.Chainfire"
5