android - 在 TabLayout 中自定义选中的选项卡

Question

这就是我需要的

这是我取得的成果（忽略大小和背景颜色）

我的代码：

<android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="24dp"
                    app:tabMode="fixed"
                    app:tabBackground="@drawable/tab_selector"
                    app:tabIndicatorHeight="0dp"
                    app:tabTextAppearance="?android:textAppearanceMedium"
                    app:tabSelectedTextColor="#6e00b5"/>

tab_selector.xml

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

    <item android:drawable="@drawable/selected_dot"
        android:state_selected="true"/>

</selector>

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:innerRadius="0dp"
        android:shape="ring"
        android:thickness="4dp"
        android:useLevel="false">
        <solid android:color="#6e00b5"/>
    </shape>
</item>

我面临的唯一问题是将点放在文本下方。

标签： androidandroid-layoutandroid-xmlandroid-tablayout

Answer 1

简单的解决方案

使用app:tabIndicator代替app:tabBackground

<TabLayout
    app:tabIndicator="@drawable/tab_dot"
    app:tabIndicatorHeight="8dp">

请注意，至少使用两倍app:tabIndicatorHeight的制表符 ( 4dp) 以使其完全可见。