How do I change the color and/or drawable of the TabWidget divider in Android?

Question

I'm using a TabLayout and I have custom images for the tabs that I am using, but for the life of me I can't figure out how to change the color or even the image of the divider between the tabs and the tab content. I have attempted to use setDividerDrawable(), but it crashes when I call it before setting the tab content and just does nothing when I call it after. If I can just get it to be black that would be sufficient, but so far nothing has worked. Thanks for any guidance.

Hugo

Answer 1

You have to do this: tabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);

Where R.drawable.tab_divider is an image in your resources directory.

But the key is you have to do that BEFORE you've added any tabs to the tab host.

My tab initialization code looks like:

private void initializeTabs(int curTab) {
    this.tabHost = getTabHost();
    tabHost.clearAllTabs();

    TabSpec ts1, ts2, ts3, ts4, ts5;
    // tab separator
    tabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);

    ts1 = this.setupTab(new TextView(this), tabHost, R.drawable.browse_tab_normal, 
            mResources.getString(R.string.Browse));

    ts2 = this.setupTab(new TextView(this), tabHost, R.drawable.search_tab_normal, 
            mResources.getString(R.string.Search));

    ts3 = this.setupTab(new TextView(this), tabHost, R.drawable.postad_tab_normal, 
            mResources.getString(R.string.Post));

    ts4 = this.setupTab(new TextView(this), tabHost, R.drawable.watchlist_tab_normal, 
            mResources.getString(R.string.WatchList));

    ts5 = this.setupTab(new TextView(this), tabHost, R.drawable.managead_tab_normal, 
            mResources.getString(R.string.Login));

    // intents
    ts1.setContent(new Intent().setClass(this, BrowseTabActivity.class));
    ts2.setContent(new Intent().setClass(this, SearchTabActivity.class));
    ts3.setContent(new Intent().setClass(this, PostAdTabActivity.class));
    ts4.setContent(new Intent().setClass(this, WatchlistTabActivity.class));
    ts5.setContent(new Intent().setClass(this, LoginTabActivity.class));

    tabHost.addTab(ts1);
    tabHost.addTab(ts2);
    tabHost.addTab(ts3);
    tabHost.addTab(ts4);
    tabHost.addTab(ts5);

...

Euchromosome

The answer is OK but how can I set with the same code a color instead a image. Thanks! – Kayseri

Answer 2

The better way to define a divider is to make if from your XML markup:

<TabWidget
     android:layout_width="match_parent"
     android:showDividers="middle"
     android:divider="@drawable/design_tab_divider">
 </TabWidget>

So, you can define a drawable just from the markup. Mind that you must use android:divider along with android:showDividers="middle" to place the dividers between tabs. For more read the spec and pay attention to properties inherited from LinearLayout - docs in google

Mode