How to change tab background color in action bar tabs

Question

i am implementing tabs with action bar but i am fail in change background color of tabs can one help me.

Thanks in advance.

My output

enter image description here

My Required output

enter image description here

for that bottom stript red color i am using below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@color/transparent" />
    <item android:state_focused="false" android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/tab_selected_example" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@drawable/tab_unselected_focused_example" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/tab_selected_focused_example" />


<!-- STATES WHEN BUTTON IS PRESSED -->

    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false"
          android:state_pressed="true"
          android:drawable="@drawable/tab_unselected_pressed_example" />
    <item android:state_focused="false" android:state_selected="true"
        android:state_pressed="true"
        android:drawable="@drawable/tab_selected_pressed_example" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"
          android:state_pressed="true"
          android:drawable="@drawable/tab_unselected_pressed_example" />
    <item android:state_focused="true" android:state_selected="true"
          android:state_pressed="true"
          android:drawable="@drawable/tab_selected_pressed_example" />

</selector>

Change capital to small Text appear all caps in Action Bar Tabs in Sherlock

<style name="My.TabText.Style" parent="@android:style/Widget.Holo.Light.ActionBar.TabText">
    <item name="android:textAllCaps">false</item>
     <item name="android:textSize">14sp</item>
       <item name="android:textStyle">normal</item>
</style>

Change action color and tabs color

// set background for action bar
bar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0c2354")));

// set background for action bar tab
bar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#B5C0D0")));

possible duplicate of [Android ActionBar Tab Color](http://stackoverflow.com/questions/7585002/android-actionbar-tab-color) — 2Dee, May 21 '15 at 14:31
Thanks Mr. Jared Burrows, If ActionBar tabs are deprecated can i know what is the latest one... — NareshRavva, May 22 '15 at 05:24
Answer: // set background for action bar actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#DC180C"))); // set background for action bar tab actionBar.setStackedBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.tab_select))); — NareshRavva, May 22 '15 at 05:27

score 1 · Answer 1 · answered May 21 '15 at 14:48

try this one.

                 for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
                    mTabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#01afeb")); // unselected
                    TextView tv = (TextView) mTabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
                    tv.setTypeface(Typeface.MONOSPACE);
                    //Unselected Tabs
                    tv.setTextColor(Color.parseColor("#ffffff"));
                }

                mTabHost.getTabWidget().getChildAt(mTabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#f9b526")); // selected
                TextView tv = (TextView) mTabHost.getCurrentTabView().findViewById(android.R.id.title); //for Selected Tab

                tv.setTextColor(Color.parseColor("#01afeb"));

By Default tabs text coming in capital letters how i have to change that — NareshRavva, May 22 '15 at 05:28

score 0 · Answer 2 · answered May 21 '15 at 14:32

0

You can do this if you change the theme of the application to Holo Light for example like this

<application android:theme="@android:style/Theme.Holo.Light" ... />

More information could be found here https://developer.android.com/training/basics/actionbar/styling.html

Or without changing the whole theme like this for example:

ActionBar bar = getActionBar();
bar.setBackgroundDrawable(new ColorDrawable("FFAB00"));

answered May 21 '15 at 14:32

Gabriella Angelova

2,985
1
17
30

Thanks Gabriella Angelova,....Edited my required output screen if you observed that actionbar having red color and tabs having gray color with red color bottom stript(selected tab identification), if i apply setBackgroundDrawable(new ColorDrawable("FFAB00")); i am not getting my required o/p – NareshRavva May 22 '15 at 05:16
// set background for action bar actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#DC180C"))); // set background for action bar tab actionBar.setStackedBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.tab_select))); – NareshRavva May 22 '15 at 05:21
By Default tabs text coming in capital letters how i have to change that – NareshRavva May 22 '15 at 05:28
you could create a new theme and set them not to be capitalized. See this question for more information http://stackoverflow.com/questions/9953240/tab-widget-have-always-in-capital-alphabets-in-android-4-0 – Gabriella Angelova May 22 '15 at 06:12

How to change tab background color in action bar tabs

2 Answers2