在 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>

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

Answer 1

我不这么认为，选项卡选择器将在 tablayout 的情况下工作。您需要以自己的方式实现

您需要设置 TabSlected 监听器 然后添加下面的代码，

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
    @Override
    public void onTabSelected(TabLayout.Tab tab){
    int position = tab.getPosition();
    LinearLayout view = (LinearLayout) tabLayout.getChildAt(0);      
    TextView textView = (TextView) view.getChildAt(position);
//Below line will change selected tab textview title only.
    textView.setCompoundDrawablesWithIntrinsicBounds(null,null,null,objContext.getResources().getDrawable(R.drawable.selected_dot))
    }
});

Answer 2

简单的解决方案

使用app:tabIndicator代替app:tabBackground

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

请注意， 使用至少两倍 app:tabIndicatorHeight 的选项卡深度 (4dp) 以使其完全可见。

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

Customize the selected tab in TabLayout

android

android-layout

android-xml

android-tablayout

简单的解决方案