How to change color of Selected Tab

Question

How to change color of tab when its selected, see below screen shot:

i am showing Orange color in ActionBar, in a same way i wanna show orange color in place of light blue.

To show Orange color in ActionBar background, i am using below code:

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

    <style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
         <item name="android:actionBarStyle">@style/Theme.MyAppTheme.ActionBar</item>
    </style>

   <style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#FF4444</item>
    </style>

</resources>

Answer 1

You can use this code and set icon alpha , it look like one is selected and other are disable.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        switch (position) {
            case 0:
                tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(255);
                tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
                break;
            case 1:
                tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(255);
                tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
                break;
            case 2:
                tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(255);
                tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
                break;
            case 3:
                tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
                tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
             tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(255);
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

Answer 2

Style your custom theme like below.

<item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item>

after that

<style name="Widget.TabWidget">
    <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:singleLine">true</item>
</style>  


<style name="TextAppearance.Widget.TabWidget">
    <item name="android:textSize">14sp</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textColor">@android:color/tab_indicator_text</item>
</style>   

Or you can use following code.

 tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.RED);

or

 tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#4E4E9C"));

Hope it helps you .

Answer 3

you can use like this

tab_background_select.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:drawable="@drawable/tab_background" />// for selected
     <item android:drawable="@drawable/tab" /> // for normal
</selector>

Answer 4

To change tab bar background:

actionBar.setStackedBackgroundDrawable(new ColorDrawable(yourOwnColor)); 

Answer 5

use this code in order to change the color of selected tab:-

tabLayout.setTabTextColors(Color.parseColor("color_for_unselected_tab"), Color.parseColor("color_for_tab"));
for tab-indicator
 tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#627179")));

Answer 6

you can use this code and set the background of your item_tab xml file

tab_selection.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false" 
      android:drawable="@drawable/tab_bg_selected" />
<item android:state_selected="false" android:state_pressed="false" 
      android:drawable="@drawable/tab_bg_unselected" />
<item android:state_pressed="true" 
      android:drawable="@drawable/tab_bg_pressed" />
</selector>