[TabLayout] Add tabTextAppearance for Selected Tab

[astamato]

Is your feature request related to a problem? Please describe.

To ensure Accessibility for users with color vision deficit, it's important that all tabs within the TabLayout component (selected and unselected) have a font colour with enough contrast with the background, therefore the usage of light greys to represent unselected on a light background can no longer be used. To increase the differentiation between selected and unselected tabs, we proposed using bold font for the selected tab.

Now, all across the community there are articles on how to implement this with hacks and tricks, because it's not part of the component itself. We managed to implement a solution for this in our app but quickly found glitches in particular devices, this for instance being a Samsung device:

https://user-images.githubusercontent.com/8226593/113285044-603ff300-92e2-11eb-9440-70ea2219c532.mov

Describe the solution you'd like

Add this behaviour to the component's lifecycle and refresh appropriately.

In the same way that we have theme element: <item name="tabTextAppearance">@style/TabTextAppearance1</item>

it would be great to have:

<item name="selectedTabTextAppearance">@style/TabTextAppearance2</item>

And then each tab will use the corresponding theme.

Describe alternatives you've considered Maybe instead, in the same fashion we have tabSelectedTextColor, we can have tabSelectedTextTypeface to be applied instead.

Cheers!

[ababicheva]

I vote for this feature. Right now I'm using a workaround to achieve the selected tab to be with a bold font.

[priyanka-rani]

tabSelectedTextAppearance was added in 1.8.0-alpha02. But I think there are still some glitches while swiping through the tabs. Sometimes unselected tabs get the typeface of the selected tab and vice versa. Please fix this issue in the coming releases.

[astamato]

In order to understand what to fix we'd need to know exactly how it's broken, is there sample code you can attach or a fuller description of the steps to reproduce the issue? you can create an issue on the issue tracker for material design components in Android: https://issuetracker.google.com/issues/new?component=439535&template=1121918 and share it here for visibility. thanks🙏

[priyanka-rani]

Hi @astamato, seems like the issue has been fixed in version 1.8.0-alpha-03 (reference: 4a0e1a0). Thanks for resolving the issue! 👍

[sivasubramaniamv]

Hi, @astamato I used tabTextAppearance to set the default text style in the tab layout. I also used tabSelectedTextAppearance to set the selected tab text style. I made the text bold when the tab is selected (in tabSelectedTextAppearance), but the textStyle="bold" property is still applied when a previously selected tab is unselected. I set the textStyle property to "normal" in tabTextAppearance. But it still doesn't work for me.

[imhappi]

@siva-subramaniam-v can you describe your repro steps and show your tab layout xml?

I'm trying to repro with the following xml where the selected/unselected styles simply contain textstyle=bold/normal but I'm unable to repro

  <com.google.android.material.tabs.TabLayout
      android:id="@+id/test"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabSelectedTextAppearance="@style/selected"
      app:tabTextAppearance="@style/unselected"...

[priyanka-rani]

@siva-subramaniam-v , I had the same problem when I used version 1.8.0-alpha-02. When 1.8.0-alpha-03 was released I updated to it and the problem was fixed for me. You can try with the latest version and see if it is fixed or not.