Support Library Version 28.0.0 TabLayout bug

Question

After updating to the latest version of the support library (27.1.1 -> 28.0.0), there are problems with the user interface.

an issue:

a desired state:

tab_layout_unselected_indicator.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-5dp"
        android:right="-5dp"
        android:top="-5dp">
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorGrey" />
        </shape>
    </item>
</layer-list>

tab_layout:

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBlackDark"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:tabBackground="@drawable/tab_layout_unselected_indicator"
        app:tabIndicatorColor="@color/colorOrange"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorOrange"
        app:tabTextAppearance="@style/StrikeCustomTabText"
        app:tabTextColor="@color/colorGrey" />

It looks like the background of one tab crosses the other. I tried to change the indent and noticed this. Now I'm using a previous version of the support library (27.1.1). How can I fix this for the current version of the support library (28.0.0)?

Answer 1

Replace your background drawable with this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorGrey"/>
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorBlackDark"/>
        </shape>
    </item>

</layer-list>

You've correctly identified the problem with your current background; the new support library allows tab items to draw outside their bounds, so you're seeing the negative margin border actually appear now, instead of being clipped off.

To solve this, you can instead draw a full background of gray, and then all-but-2dp of black to cover most of it up. This doesn't ever draw outside of the tab item bounds, so the problem disappears. There's a small overdraw cost here (since the "line" color has to be overlapped by the "background" color), but I don't think this will have any performance impact for just three tabs.