TabLayout: custom color setting for each tab

Question

I have seen many questions that say how to set color differently for selected (active) and unselected (inactive) tabs. I also know that google provides void setTabTextColors (int normalColor, int selectedColor) to achieve this.

My requirements are a little different, I'm working on a quiz with TabLayout and CardView . TabLayout allows the user to navigate between questions, and CardView used to display questions.

I need to set the color of the tabs for which the user has already selected an answer different from the one to which the user has not yet answered. By default, TextColor is black, but if the user selects an answer, then the color of the scoreboard should be blue (for example only), and it should remain so until the user exits. I have an int array called Select that will hold the value of the option that the user has selected (values ​​range from 1 to 4). By allocating the Select array, I also initialize it with -1. I thought about setting up a loop, and then if the -1 array leaves the tab as it is, or sets the color to blue.

How can I achieve this functionality?

Answer 1

You can work with TabLayout internals by querying these children and manually changing the TextViews. This can lead to damage to your code when upgrading to a different version of the support library, but while you track and verify when upgrading, it should work:

 private void updateTabTextColors() { LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0); for (int i = 0; i < mTabLayout.getTabCount(); i++) { LinearLayout item = (LinearLayout) tabsContainer.getChildAt(i); TextView tv = (TextView) item.getChildAt(1); tv.setTextColor(Select[i] == -1 ? Color.BLACK : Color.BLUE); } } 

Answer 2

Just enhance Marcelo Liberato's answer to support custom background for each tab item.

  LinearLayout tabsContainer = (LinearLayout) mTabLayout.getChildAt(0); LinearLayout childLayout1 = (LinearLayout)tabsContainer.getChildAt(2); LinearLayout childLayout2 = (LinearLayout)tabsContainer.getChildAt(3); LinearLayout tabView = (LinearLayout) childLayout1.getChildAt(0).getParent(); tabView.setBackgroundResource(R.drawable.ic_blue_selector); tabView = (LinearLayout) childLayout2.getChildAt(0).getParent(); tabView.setBackgroundResource(R.drawable.ic_red_selector); 

Custom XML file:

 <?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="match_parent" android:id="@+id/ll_tab_holder" android:orientation="vertical"> <LinearLayout android:id="@+id/ll_tab_icon_title_holder" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/tab_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:scaleType="fitCenter" /> <TextView android:id="@+id/tab_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:textAppearance="@style/lasuCustomTabText" /> </LinearLayout> <TextView android:id="@+id/tab_only_title" android:layout_width="match_parent" android:layout_height="56dp" android:textAllCaps="true" android:textSize="12sp" android:layout_gravity="center" android:gravity="center" android:textColor="@drawable/ic_tab_text_color_selector" /> </LinearLayout> 

Output:

Answer 3

If you are interested in using a library for this function, this library works well.

https://github.com/astuetz/PagerSlidingTabStrip

Answer 4

As in doc getTabTextColors() -> Gets the text colors for the different states (normal, selected) used for the tabs. tabs can only have 2 states. The only way to achieve what you want is to inherit the Tab class and add a new state, for example: tabAlreadyVisited . Then the @Override draw method to change the background color based on the value of the tabAlreadyVisited attribute. Or change the color of the text with setTabTextColors

Answer 5

You can customize your own view for your tab.

  TabLayout.Tab yourTab = tabLayout.newTab(); yourTab.setCustomView(R.layout.red_text_view); 

And red_text_view.xml is

 <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="match_parent" android:layout_height="match_parent" android:fontFamily="sans-serif-medium" android:gravity="center" android:textColor="#f44336"/> 

If you use @android:id/text1 default, the settext tab should work. You can do whatever you want with your own look.