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

Answer 1

I had a similar problem. In my case, I wanted to change the color of the action bar whenever the user clicked on one of the fragments in the navigation drawer.

Here is the code I used to resolve this issue.

Since you can't access the Action bar from a fragment, you have to create it in your main menu. Here is the method I used.

public void restoreActionBar(int parsedColor) {
        this.parsedColor = parsedColor;
        ActionBar actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setTitle(mTitle);
        actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));

    } 

public boolean onCreateOptionsMenu(Menu menu) {
        if (!mNavigationDrawerFragment.isDrawerOpen()) {
            // Only show items in the action bar relevant to this screen
            // if the drawer is not showing. Otherwise, let the drawer
            // decide what to show in the action bar.
            getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
            restoreActionBar(parsedColor);
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

Now in your class that extends fragment:

public void onAttach(Activity activity) {
            super.onAttach(activity);

            ((MainActivityTrekkly)activity).onSectionAttached(4);
            MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());

            mA.restoreActionBar(Color.parseColor("#028482"));
        }

I got this working with the Navigation drawer so you might have to adapt this code.

Did this help?

Answer 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>

Answer 3

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!