Android TabLayout как сделать два подчеркивания

Question

Я пытаюсь создать TabLayout и это выглядит так.

И я хочу сделать еще один под строкой, как это.

Вот моя собственная желтая линия, и я хочу сделать черную, а когда я меняю вкладки, желтая линия сама меняет положение. Может быть, мне нужно сделать некоторые фоновые строки, но я не понимаю, как

XML:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:tabGravity="fill"
    app:tabMaxWidth="0dp"
    app:tabMode="fixed" />

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/visit_tabs_indicator</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">@android:color/white</item>
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/visit_tabs_text</item>
</style>

Answer 1

Создайте фоновый рисунок, который имеет нижнюю черную линию. т.е. tab_ract_border.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#000000" />
        </shape>
    </item>
</layer-list>

затем примените этот drawable к фону Tablayoutт.е. app:tabBackground="@drawable/tab_ract_border"

<android.support.design.widget.TabLayout
    android:id="@+id/content_main_tab_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    app:tabIndicatorColor="#F3CD84"
    app:tabBackground="@drawable/tab_ract_border"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/colorAccent"
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
    app:tabTextColor="#000000" />

у тебя это будет работать:)

Answer 2

В тебе style.xml код:

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/visit_tabs_indicator</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">@drawable/myTabBackground</item>
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/visit_tabs_text</item>
</style>

Затем создайте новый файл ресурсов XML в папке Drawable: myTabBackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/white"
        android:state_selected="true"/>
    <item android:drawable="@android:color/black"/>
</selector>

Надеюсь, это поможет!:)