Sometimes itâs the little problems in life that can be so challenging, but when solved are the most rewarding. As such is my experience with changing the colors on the Android TabWidget object. I spent several days and nights searching for documentation, reading the responses to questions other developers have posted, trying different things to get this simple problem solved and finally the âAHA!â moment came last night during my sleep. I woke up this Sunday morning at 6 AM with the solution on my mind. So for about an hour and half before going to church, I solved one of the greatest programming challenges Iâve faced in many yearsâhow to change the tab colors on the Android TabWidget and keep the dividers in their proper place.
Some of you might have this figured out already, but from the great number of unanswered questions on the net, Iâll assume most havenât. Thereâs so little documentation for some of these more esoteric Android features. The books Iâve read are good to get someone started with Android, some are even helpful. But I havenât found one yet that teaches the common tasks programmers are likely to do when theyâre coding.
The answer to my question was right in front of me the entire time. I found the solution in the Android SDK. Iâm coding my app for Froyo or higher. The minimum SDK version for this solutions is 8. I have not tested to see if it works on the previous SDK versions. Youâre on your own for that.
To illustrate what Iâve done, take a look at the two emulator screen captures below.
 Fig 1. Standard Grey Tabs |
 Fig 2. Modified Blue Tabs |
The goal is to allow users to choose between a dark (Fig. 1) and light (Fig. 2) color scheme. The choice is made in a CheckBoxPreference object through the Preferences framework.
As soon as a user selects or deselects the Light Colors checkbox, the tab screen changes color immediately upon returning to it from Preferences.
Itâs really quite easy to control the tab colors. Whatâs not so easy is to control the orange bars that display to the left and right of a tab when it is pressed. Actually, they can be changed but itâs not recommended to do so because you have to access them through the internal Android API (com.android.internal). Doing anything through the internal API is risky. Youâll never know how the internals will change over time which can cause your application to break and security risks are inherent.
To modify the tab colors, first copy tab_indicator_v4.xml or tab_indicator.xml from android-sdk-windowsplatformsandroid-8dataresdrawable to the resdrawable folder in your project. If you donât have a resdrawable folder, create it and then copy the file from the SDK. The content of the file is:
The @drawables in this file control the appearance of the tabs in their various states, i.e. pressed, focused, selected, etc. These drawables are .png graphics located in your projectâs drawables-hdpi directory. You can get the graphics referenced in this file from the drawables-hdpi directory for the platform of your choice in the Android SDK. You assign this file as the background resource for your tabwidget.
I created two versions of this .XML file. The first is for the dark theme, the other for the light theme. The only difference is the name of the @drawables graphics Iâm using in each. To make the blue selected and unselected .png graphics I made copies of tab_selected_v4.9.png and tab_unselected_v4.9.png from the SDK. Then I used the color replacement tool in Photoshop to create the new images.
The following Java example is a custom method I wrote for my appâs tab activity to set the background resource to either file based on the user preference IsLightColors.
This code snippet references app.RetrieveBoolean. You wonât find this method in Android. This is another custom method I wrote for an app-level extension library. Using this method, we obtain the value of IsLightColors from the Preferences framework and the rest is apple pie!
I certainly hope this has shed some light on the tab color issue and helped you in your quest to customize your tabs.
Attribution
Android is a trademark of Google Inc.
