How to change Viewpager tab colour dynamically?

Question

How to change colour of Tabs like this? When I click/swipe to green or any other tab, the tab colour should change to that appropriate colour and rest of other tabs colour should change to black. How can I do this? Im using Viewpager.

I tried this code inside onpagelistener:

  if(position == 0) {
                   viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
         }        
  else if(position == 1) { 
                   viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
         }

But above code has no effect.

And Im using this code : Android Viewpager tutorial Androidhive

Solution 1

There is tutorial Styling tabs in the Android action bar. You can choose your parent theme as Theme.Holo for API>=3, or Theme.AppCompat for support library V7, etc.

And besides, for <item name="android:background">, you could set it to a selector you create for tab state change:

android:background="@drawable/selector_tab"

For selector_tab can be like:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/pressed_color"
       android:state_pressed="true" />
    <item android:color="@color/selected_color"
       android:state_selected="true" /> 

    <item android:color="@color/normal_color" />
</selector>

[UPDATE]

For change tab color dynamically, suggest to use custom view with tab:

//your_custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  >


  <TextView
    android:id="@+id/tab_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:maxLines="1" />

</LinearLayout>

LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);

then setCustomeView(customView) when add tab to ActionBar. And in your tab/page change listener:

Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);  

To remove possible gap around tab caused by custom view, you can set tab style:

<style name="ActionBarTabStyle" parent="@android:style/Widget.AppCompat.Light.ActionBar.TabView">
   <item name="android:paddingLeft">0dp</item>
   <item name="android:paddingRight">0dp</item>
   <item name="android:paddingTop">0dp</item>
   <item name="android:paddingBottom">0dp</item>
</style>

and use your theme parent accordingly.

Hope this help!

Solution 2

Finally I solved it. Thanks to @Xcihnegn for his idea. This is the solution:

/* For setting default selected tab */

    actionBar.setSelectedNavigationItem(0);
    actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);  

    /**
     * on swiping the viewpager make respective tab selected
     * */
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {

    /*on changing the page make respected tab selected */           
            actionBar.setSelectedNavigationItem(position);

                if(position == 0)
                {

                    actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);

                }else if(position == 1)
                {
                    actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);

                }else if(position == 2)
                {
                    actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
                }

            }

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

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

@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
    viewPager.setCurrentItem(tab.getPosition());
}

When one tab gets unselected, setCustomView(null) changes its layout back to its original black colour. So only selected tabs will change colour. Unselecting the tabs will change its layout to original form.

@Override
public void onTabUnselected(ActionBar.Tab tab,     android.support.v4.app.FragmentTransaction fragmentTransaction) {

        if(tab.getPosition() == 0)
        {
            actionBar.getTabAt(0).setCustomView(null);

        }else if(tab.getPosition() == 1)
        {
            actionBar.getTabAt(1).setCustomView(null);

        }else if(tab.getPosition() == 2)
        {
            actionBar.getTabAt(2).setCustomView(null);
        }
    } 
}

To remove unnecessary padding appear when setting the custom view we should use this code in styles.xml.

<style name="Custom.ActionBar.TabView.Empty" parent="@android:style/Widget.ActionBar.TabView">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:background">#000000</item>
</style>

<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
    <item name="android:actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
</style>

Dont forget to add the this code just above setcontentview in your activity.

settheme(R.styles.CustomActionbartab);

Custom layout for tabs.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/red">

<TextView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="RED"
    android:textStyle="bold"
    android:gravity="center"
    android:textColor="#ffffff"/>
</RelativeLayout>