How to change the text color of SlidingTabLayout?

Question

I made an application which use the ActionBarCompat

I created the tabs using the SlidingTabLayout class.

the class is this:

SlidingTabLayout.java

but I can not change the color of the tabs...

my viewpager fragment is this:

<swmovil.fyb.SlidingTabLayout
    android:id="@+id/mTabs"
    android:layout_width="match_parent"
    android:layout_height="48dip" />

<android.support.v4.view.ViewPager
    android:id="@+id/mPager"
    android:layout_width="match_parent"
    android:layout_height="0px"
    android:layout_weight="1"
    android:background="@color/white" />

the application works great, but i can´t change the color text of the tabs...

I made the application after seeing the following example:

rudsonlive/Navigation-Drawer-ViewPager-ActionBarCompat

How can i change the text color of the tabs text ?

thanks !!!

Answer 1

1) First of all create color folder under res (/res/color)
2) create xml file selector.xml under /res/color folder

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

3) Then in the populateTabStrip() method in SlidingTabLayout put this

tabTitleView.setTextColor(getResources().getColorStateList(R.color.selector));

now you have a selector and you can change the color of the text on any event you want

if that is not working add the following lines of code.
a) in populateTabStrip() method at the end add this

if (i == mViewPager.getCurrentItem()) {
    tabView.setSelected(true);
}

and b) change the onPageSelected() method to this

    @Override
    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mTabStrip.onViewPagerPageChanged(position, 0f);
            scrollToTab(position, 0);
        }
        for (int i = 0; i < mTabStrip.getChildCount(); i++) {
            mTabStrip.getChildAt(i).setSelected(position == i);
        }
        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageSelected(position);
        }
    }    

Answer 2

Open your file SlidingTabLayout.java (the default one from Google IO) and find the function populateTabStrip() , then after this code

mTabStrip.addView(tabView);
        if (i == mViewPager.getCurrentItem()) {
            tabView.setSelected(true);
        }

add the following line:

int color = ContextCompat.getColor(tabView.getContext(), R.color.grey);
tabTitleView.setTextColor(color);

Replace R.color.grey with your preferred color.

Answer 3

You should be able to see the TextView the class is using.

tabTitleView.setTextColor(getResources().getColor(R.color.white));

In my class, the TextView was tabTitleView. If you are using the default example provided by Google, you will find it under populateTabStrip function.

Answer 4

copy code of slidingtablayout and slidingtabstrip and put it in a java file.then make a customtab_title.xml in your layout folder and a selector.xml file in your drawable folder. `

<?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"
           android:orientation="horizontal"
           android:padding="10dp"
   >


<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:textColor="@drawable/slidingtab_title_color"/>


</LinearLayout>

selector.xml

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

And in your mainactivity or where u r showing your tabs add one line of code - tabs.setCustomTabView(R.layout.customtab_title, R.id.textView2);

here tabs is slidingtablayout tabs;

to change indicator color add - tabs.setSelectedIndicatorColors(getResources().getColor(R.color.unpressed));

Answer 5

   @Override
    public void onPageSelected(int position) {

for (int i = 0; i < mTabStrip.getChildCount(); i++) {

  TextView tv = (TextView) mTabStrip.getChildAt(i);
 if (i==position)
  tv.setTextColor(getResources().getColorStateList(R.color.white));
 else                             
  tv.setTextColor(getResources().getColorStateList(R.color.tab_text_color));

        }

this may be help you

Answer 6

Unfortunately this class doesn't support customizing the tab text color without editing the code and always uses the default text color of the theme. You'll have to patch the class to allow setting the tabs text color by code or by style attribute. One alternative is to use the PagerSlidingTabStrip library.

Answer 7

Looking at the code for the SlidingTabLayout...You can set a custom tab view, which allows you to control the content of the tab and set a custom tab text color. Have a look at slidingTabLayout.setCustomTabView(int layoutResId, int textViewId).

Answer 8

I use Panayiotis Irakleous solution but I think it is better to avoid looping part in onPageSelected procedure.

The steps are the same, you need to add an int class member (example: mCurrentTabIndex) to save current tab index.

In steps 3.a, you need to add

mCurrentTabIndex = i;

So it will be like this:

if (i == mViewPager.getCurrentItem()) {
    tabView.setSelected(true);
    mCurrentTabIndex = i;
}

Last, in steps 3.b, replace the looping part to this:

mTabStrip.getChildAt(mCurrentTabIndex).setSelected(false);
mTabStrip.getChildAt(position).setSelected(true);
mCurrentTabIndex = position;

So the code will be like this:

@Override
public void onPageSelected(int position) {
    if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
        mTabStrip.onViewPagerPageChanged(position, 0f);
        scrollToTab(position, 0);
    }

    mTabStrip.getChildAt(mCurrentTabIndex).setSelected(false);
    mTabStrip.getChildAt(position).setSelected(true);
    mCurrentTabIndex = position;

    if (mViewPagerPageChangeListener != null) {
        mViewPagerPageChangeListener.onPageSelected(position);
    }
}