Селектор TabBackground часто не применяет всю ширину списков слоев, когда вы выбираете / отменяете выбор TabItems в TabLayout

У меня есть TabLayout с селектором в качестве фона индикатора, например:

<android.support.design.widget.TabLayout
    android:id = "@+id/custom_indicator"
    android:layout_width = "wrap_content"
    android:layout_height = "3dp"
    android:layout_gravity = "bottom|center"
    app:tabBackground = "@drawable/dashpageindicator"
    app:tabMinWidth = "5dp"
    app:tabMaxWidth = "15dp"
    app:tabGravity = "fill"
    app:tabIndicatorHeight = "0dp"
    app:tabMode = "scrollable"
    android:layout_marginBottom = "24dp"
    app:tabPaddingStart = "0dp"
    app:tabPaddingEnd = "0dp">

Выдвижной dashpageindicator вот такой:

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

indicator_dash_selected и indicator_dash_unselected - это layer-list с разной шириной и высотой, например:

indicator_dash_selected

<layer-list xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:start = "1dp" android:end = "1dp">
        <shape
            android:innerRadius = "0dp"
            android:shape = "rectangle"
            android:thickness = "2dp"
            android:useLevel = "false">
        <size android:height = "2dp" android:width = "12dp" />
        <solid android:color = "@color/default_text_color"/>
        <padding android:left = "0dp" android:right = "0dp" />
    </shape>
</item>

indicator_dash_unselected

<layer-list xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:start = "1dp" android:end = "1dp">
        <shape
            android:innerRadius = "0dp"
            android:shape = "rectangle"
            android:thickness = "2dp"
            android:useLevel = "false">
        <size android:height = "0.5dp" android:width = "4dp" />
        <solid android:color = "@color/default_text_color"/>
        <padding android:left = "0dp" android:right = "0dp" />
    </shape>
</item>

Я предполагаю, что когда выбран конкретный элемент ViewPager, элемент вкладки должен расти следующим образом:

Однако, когда я перехожу к другим вкладкам, они довольно часто не растут в width. Вместо этого они:

Все атрибуты layer-list работают нормально, за исключением sizewidth.

Я говорю довольно часто, потому что иногда он работает отлично. Вторая вкладка увеличивается до ожидаемых ширины и высоты, если выбрана вторая вкладка. Третья вкладка увеличивается, если она выбрана, и так далее. Но чаще всего нет.

Кроме того, всякий раз, когда это срабатывает, что случается редко, я замечаю задержку в несколько секунд. Это означает, что фон выбранной вкладки остается indicator_dash_unselected в течение нескольких секунд или минут, прежде чем станет indicator_dash_selected.

Я также заметил, что selector работает после нескольких секунд ожидания:

1. Собираюсь на новый Activity
2. Возвращаясь к корпусу Activity, TabLayout и ViewPager

Вот так:

Nota Bene:TabLayout находится в CoordinatorLayout вместе с ViewPager и ConstraintLayout, что и fitsSystemWindows.

Любая помощь или понимание будут оценены.

ПРОГРЕСС: Действуя по совету @Dhananjay поместить оба layer-list внутрь selectoritems, это решение тоже не работает:

<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:state_selected = "true" >
        <layer-list>
            <item android:start = "1dp" android:end = "1dp">
                <shape
                    android:innerRadius = "0dp"
                    android:shape = "rectangle"
                    android:thickness = "2dp"
                    android:useLevel = "false">
                    <size android:height = "2dp" android:width = "12dp" />
                    <solid android:color = "#ffffff"/>
                    <padding android:left = "0dp" android:right = "0dp" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_selected = "false" >
        <layer-list>
            <item android:start = "1dp" android:end = "1dp"
                android:top = "1dp" android:bottom = "1dp">
                <shape
                    android:innerRadius = "0dp"
                    android:shape = "rectangle"
                    android:thickness = "1dp"
                    android:useLevel = "false">
                    <size android:height = "0.5dp" android:width = "4dp" />
                    <solid android:color = "#ffffff"/>
                    <padding android:left = "4dp" android:right = "4dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>