How to Change Actionbar Tab Indicator Programmatically

Is it possible to change actionbar tab indicator programmatically

I have succeeded to implement what i wanted by using @Padma's answer to generate my tab indicator backgrounds : i needed 5 selectors : green, yellow, blue, orange and red. So i created 5 xml drawables (tabs_selector_red.xml, tabs_selector_blue.xml, etc...) :

tabs_selector_green.xml :

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

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

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

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

I also created a layer-list for each xml background :
layer_bg_selected_tabs_green.xml

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/tab_green" />

        <padding android:bottom="5dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFFFFF" />
    </shape>
</item>

And finally, in the Java, i switch the background dynamically buy using selected tab's custom view and index :

private static final int[] TABS_BACKGROUND = {
        R.drawable.tabs_selector_orange, R.drawable.tabs_selector_green,
        R.drawable.tabs_selector_red, R.drawable.tabs_selector_blue,
        R.drawable.tabs_selector_yellow };
/*
BLA BLA BLA
*/
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub
    RelativeLayout tabLayout = (RelativeLayout) tab.getCustomView();
    tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);
    tab.setCustomView(tabLayout);
/* ... */
}

Now let's add some screenshots :

How to change Tab Indicator color programmatically

I use Jeff Gilfelt,s Android Action Bar Style Generator. You can use GUI to style your tabs and at the end you get the source code which you can use, review and modify accordingly. :)

Here's a link.

http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&neutralPressed=1&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100

Change ActionBar tabs color

I wrote an answer to that question 1 year ago.

You can find in here:
Change Color TabSelector on v4 ViewPager

Change support ActionBar tabs indicator color

Try this:

1. Create the theme for the app, the action bar, and the tabs. We need
   to set the background for the tabs to the “tab_bar_background”
   drawable.

   in res/values/styles.xml

   <style name="FindMyTrain" parent="Theme.Sherlock">
       <item name="android:actionBarTabStyle">@style/FindMyTrain.ActionBar.Tab</item>
       <item name="actionBarTabStyle">@style/FindMyTrain.ActionBar.Tab</item>
   </style>
   
   <style name="FindMyTrain.ActionBar.Tab">
       <item name="android:background">@drawable/tab_bar_background</item>
   </style>
   

2. in res/drawable/tab_bar_background add a color state list

    <?xml version="1.0" encoding="utf-8"?>
   
   <selector
   xmlns:android="http://schemas.android.com/apk/res/android">   <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_bar_background_selected"/>   <item
   android:state_selected="false" android:state_pressed="true"
   android:drawable="@color/tab_highlight"/>   <item
   android:state_selected="true" android:state_pressed="true"
   android:drawable="@drawable/tab_bar_background_selected_pressed"/>
   </selector>
   

   here you can customize tab bar pressed and selected state color.

3. in res/drawable/tab_bar_background_selected

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list
       xmlns:android="http://schemas.android.com/apk/res/android">
           <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
               <shape android:shape="rectangle">
                   <stroke android:color="#ff4ba587" android:width="5dp"/>
               </shape>
           </item> </layer-list>
   

4. Now apply the theme:

   <application
       android:allowBackup="true"
       android:icon="@drawable/ic_launcher"
       android:label="@string/app_name"
       android:theme="@style/FindMyTrain"
       android:name=".FindMyTrainApplication" >
   

Output:

For detail documentation see this Link

Change ActionBar tab color programmatically

You can set a custom View for each tab. Create a new layout resource for the tab (it can just be a TextView). Leave its background empty and make a nine-patch drawable for the selection indicator. Get a LayoutInflater using

LayoutInflater inflater = getSystemService(LAYOUT_INFLATER_SERVICE);

Then for each tab, you can do this:

Tab tab = ab.newTab()
        .setText("TY1")
        .setTabListener(new MyTabListener(this, TY1.class.getName()));
View tabView = inflater.inflate(R.layout.my_tab_layout, null);
tabView.setBackgroundColor(...); // set custom color
tab.setCustomView(tabView);
ab.addTab(tab);

---

Related Topics