When testing my Jack Sparrow Compass application on the Jelly Bean 4.2, I realized that all its Users Interface (or overall theme) was still of the Gingerbread (on which I had developed this application). Even though that interface doesn’t look that bad on Jelly Bean, it’s not consistent with other application interface, and I would like to keep it consistent with new platforms, but would still like to keep the compatibility with old Android versions.
After few tries and tricks, I was successful, and I’m going to share that here for easy future reference. To best understand the problem, let’s begin from start. Here is how my application was appearing on Jelly Bean 4.2:
But if I look at other native application of the Jelly Bean, they have quite different theme and styles as shown below:
So, I wanted to look my application dialog similar to above one on Jelly Bean or higher version, but still appear the same on the old version. The trick lies in the styles XML files in corresponding Android version folder. So, I create my custom theme styles (in res/values/styles.xml):
1 2 3 4 | <?xml version="1.0" encoding="utf-8"?> <resources> <style name="MainTheme" parent="@android:style/Theme.Light.NoTitleBar"></style> </resources> |
Here I’m defining the MainTheme for my application and inheriting it from the Android built-in “Theme.Light.NoTitleBar”. This is the style I plan to apply to my main Activity in the Application manifest file by adding following attribute:android:theme=”@style/MainTheme”
Note: I’m using the “Theme.Light.NoTitleBar” as the parent style because I don’t want a default TitleBar in my application. If you want one, please choose the “Theme.Light”.
This is not all you want, but the magic comes by adding the correct style based on higher version styles. For this you create res/values-v11/styles.xml (for Android 3.0+) and res/values-v14/styles.xml (for Android 4.1) files under corresponding values-XX folders.
So here is the XML file I created under res/values-v11/styles.xml:
1 2 3 4 | <?xml version="1.0" encoding="utf-8"?> <resources> <style name="MainTheme" parent="@android:style/Theme.Holo.Light.NoActionBar"></style> </resources> |
And here is the XML file I created under res/values-v14/styles.xml:
1 2 3 4 | <?xml version="1.0" encoding="utf-8"?> <resources> <style name="MainTheme" parent="@android:style/Theme.DeviceDefault.Light.NoActionBar"></style> </resources> |
As you can see I’m using the different parent style per Android version, and this does the magic. Now if you run your applicaiton on Android 2.2 or 2.3 it will use the default theme “Theme.Light.NoTitleBar”. If you run it on Android 3.0+ version, it will use Theme.Holo.Light.NoActionBar style, and similarly for Android 4.1, it will use Theme.DeviceDefault.Light.NoActionBar.
Note: To use the higher version styles, you must set your Android target version to the higher version i.e. “4.1″. Otherwise you will get the resource/style not found error.
Now if I run the application on 4.1, it will use the native theme on all the UI components as shown below:
It was a bit tricky to grasp in start, but once you get used to this theme concept model based on version folder, you will see how powerful this is when designing applications for future versions but still maintaining backward comparability with older versions. If you want to read more, I highly recommend you to check official “Themes and Styles” guidelines on Android website:
http://developer.android.com/guide/topics/ui/themes.html