Search code examples
androidlayoutcolorsbackgroundfocus

How to modify the background of a Tab Layout tab's text when it is focused?

When I tap on a Tab Layout tab, there's the focus flash that occurs for the entire tab, except when it does, you can see a black box around the text of the tab itself. I want to get rid of that black box so that when the tab is tapped, you don't see the black box around the text from the focus flash.

Here's what I mean (print screen mid-focus flash):

Settings text with black box around it

I want to get rid of this black box around it. I've tried setting tabBackground, background, tabIndicatorColor to transparent, but this black box remains. Any ideas as to how I can remove the black box around the text?

Here's the XML for the TabLayout:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    style="@style/tabStyle"
    android:layout_width="match_parent"
    app:tabBackground="@android:color/transparent"
    app:tabMaxWidth="200dp"
    app:tabMinWidth="200dp"
    app:tabSelectedTextColor="@color/textColorSelected"
    app:tabTextColor="@color/textColorNormal"
    tools:tabTextAppearance="@style/TabTextStyle">
</com.google.android.material.tabs.TabLayout>

And then the styles for both the tabs and the text inside of them:

    <style name="TabTextStyle">
       <item name="android:textSize">25sp</item>
       <item name="android:textStyle">normal</item>
       <item name="textAllCaps">false</item>
    </style>

<style name="tabStyle">
    <item name="tabGravity">center</item>
    <item name="tabMode">fixed</item>
    <item name="android:layout_height">80dp</item>
    <item name="android:layoutDirection">ltr</item>
    <item name="tabIndicatorColor">@color/tabIndicator</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabTextAppearance">@style/TabTextStyle</item>
    <item name="tabTextColor">@color/textColorNormal</item>
</style>
Solution

  • I figured out what the issue was here; our "AppTheme" default style was declared and had a black background color set. Since the application's "AppTheme" was setting the background of the app to black overall, any other tabBackground or Background color sets I did were just overlapping the main background color designated by AppTheme. I changed the AppTheme background color to transparent, and then set the tab and background colors in the activity itself to black, and that removed the black box behind the text when a tab is selected.