• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / Android / A Simple Yet Advanced Lesson in Android™ Programming—Changing TabWidget Tab Colors

A Simple Yet Advanced Lesson in Android™ Programming—Changing TabWidget Tab Colors

By Victor M. Font Jr.
November 1, 20105 Comments

Change Android™ TabWidget Colors


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.

grey_tabs
Fig 1. Standard Grey Tabs
blue_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.

App-prefs

As soon as a user selects or deselects the Light Colors checkbox, the tab screen changes color immediately upon returning to it from Preferences.

orange_stripeIt’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.

  • 0share
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn0
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. TSR

    October 28, 2013 at 2:06 am

    Great! this solution is really works well. This is really a simplest way to customize the tab colors..
    Thanks a lot.
    -Rajesh

    Reply
  2. Quentin

    February 20, 2013 at 7:07 am

    I really want to save this particular posting, “A Simple Yet Advanced Lesson in Android Programming—Changing TabWidget
    Tab Colors” on my own webpage. Will you mind if Ido it? Many
    thanks ,Carrie

    Reply
  3. Aby

    August 21, 2012 at 4:52 am

    Thanks for a great tutorial,

    it work for me, but i have one problem, background image cannot repeat.

    I test on android 2.3, whats problem with my code ?. this is my code:

    package com.linear;

    import android.os.Bundle;
    import android.app.TabActivity;
    import android.content.Intent;
    import android.widget.TabHost;
    import android.widget.TabHost.TabSpec;
    import android.widget.TabHost.OnTabChangeListener;

    public class LinearLayoutSederhana extends TabActivity implements OnTabChangeListener{

    TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    tabHost = getTabHost();
    tabHost.setOnTabChangedListener(this);

    /*
    * Define tab untuk game
    * Tambahkan dulu GamesActivity di Android Manifest
    * */
    TabSpec gameSpec = tabHost.newTabSpec(“Game”);
    gameSpec.setIndicator(“Game”,getResources().getDrawable(R.drawable.honeycomb_games));
    Intent gameIntent = new Intent(this,GamesActivity.class);
    gameSpec.setContent(gameIntent);
    tabHost.addTab(gameSpec);

    /*
    * Define tab untuk Music
    * Tambahkan dulu MusicActivity di Android Manifest
    * */
    TabSpec musicSpec = tabHost.newTabSpec(“Music”);
    musicSpec.setIndicator(“Music”,getResources().getDrawable(R.drawable.honeycomb_music));
    Intent musicIntent = new Intent(this,MusicActivity.class);
    musicSpec.setContent(musicIntent);
    tabHost.addTab(musicSpec);

    /*
    * Define tab untuk Video
    * Tambahkan dulu VideoActivity di Android Manifest
    * */
    TabSpec videoSpec = tabHost.newTabSpec(“Video”);
    videoSpec.setIndicator(“Video”,getResources().getDrawable(R.drawable.honeycomb_video));
    Intent videoIntent = new Intent(this,VideoActivity.class);
    videoSpec.setContent(videoIntent);
    tabHost.addTab(videoSpec);

    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
    {
    //tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#8A4117"));
    tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator_v4);
    }
    tabHost.getTabWidget().setCurrentTab(0);
    //tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#C35817"));
    tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab_indicator_v4);

    }

    public void onTabChanged(String tabId) {

    // TODO Auto-generated method stub
    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
    {
    //tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#8A4117"));
    tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator_v4);
    }
    //tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#C35817"));
    tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab_indicator_v4);
    }
    }

    And this is my tab_indicator_v4.xml :

    Reply
  4. Calle_2007

    August 24, 2011 at 3:28 am

    Thanks for this tutorial it works good.
    But I have a little problem.

    I have make a copies of tab_selected.9.png and tab_unselected.9.png from the SDK into my drawable. Then I used the color replacement tool in gimp to create the new images.

    My problem is by android:drawable”@drawable/tab_press” and android:drawable=”@drawable/tab_focus” Eclipse show the message “Error: No resource found that matches the given name (at ‘drawable’ with value ‘@drawable/tab_focus’).”

    I would use the default color for press an focus state is this possible?

    Reply
  5. Daehyung Cho

    March 4, 2011 at 8:48 am

    I am an android developer. I read your article through googleing, and thanks for your blog. It was very useful for me. Your article gave me clue to improve tab widget in my application.

    Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page