Custom selected tab text color in SlidingTabLayout

Question

I'm using the SlidingTabLayout from google (https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html).

It works well, but what I want it is to put the selected title in bold and with a different color...

Regarding this post : Custom unselected tab text color in SlidingTabLayout

I make a text_tab.xml in drawable with the selector:

 <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:color="@android:color/selected" android:state_selected="true" />  <item android:color="@android:color/unselected" />  </selector> 

When in the populateTabStrip() method I put

 tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.text_tab)); 

The color is always the one of unselected...

I'm probably doing something wrong, or maybe there is another way to customise the selected tab title.

Someone has an idea?

Thanks

Answer 1

The problem is, sliding layout do not set item's state as selected. Here is my approach to solve the problem.

1) Create COLOR selector (ColorStateList) for your view. You can imagine it this way:

/res/color/tab_text_color.xml:

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

2) Place created selector to your item's view textColor (or other required) attribute:

<TextView   ...   android:textColor="@color/tab_text_color"   ... /> 

3) Do this changes in file SlidingTabLayout.java:

View oldSelection = null; // new field indicating old selected item  // method to remove `selected` state from old one private void removeOldSelection() {      if(oldSelection != null) {         oldSelection.setSelected(false);     } }  // improve method scrollToTab() as follows private void scrollToTab(int tabIndex, int positionOffset) {     final int tabStripChildCount = mTabStrip.getChildCount();     if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {         return;     }      View selectedChild = mTabStrip.getChildAt(tabIndex);     if (selectedChild != null) {          if(positionOffset == 0 && selectedChild != oldSelection) { // added part             selectedChild.setSelected(true);             removeOldSelection();             oldSelection = selectedChild;         }          int targetScrollX = selectedChild.getLeft() + positionOffset;          if (tabIndex > 0 || positionOffset > 0) {             // If we're not at the first child and are mid-scroll, make sure we obey the offset             targetScrollX -= mTitleOffset;         }          scrollTo(targetScrollX, 0);     } }  private void populateTabStrip() {     removeOldSelection(); // add those two lines     oldSelection = null;     ... } 

Answer 2

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);         }     }