Android 中的自定义指标

Question

我需要为我的选项卡布局做一个自定义选项卡指示器。它将链接到带有 TabLayoutMediator 的 ViewPager。我需要的布局是这样的：

我目前得到这个：

任何人都知道为什么？你可以在下面看到我的 XML 代码。

TabLayout 所在的布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/whiteCandy"
    android:fitsSystemWindows="true">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/onBoardingViewPager"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_0"
        android:layout_marginStart="@dimen/tablet_default_margin"
        android:layout_marginTop="@dimen/dimen_40"
        android:layout_marginEnd="@dimen/tablet_default_margin"
        android:layout_marginBottom="@dimen/dimen_75"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabDots"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dimen_6"
        android:layout_marginStart="@dimen/dimen_30"
        android:layout_marginBottom="@dimen/dimen_75"
        android:background="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@id/onBoardingViewPager"
        app:tabBackground="@drawable/tab_selector"
        app:tabIndicatorHeight="@dimen/dimen_0"
        app:tabPaddingEnd="@dimen/dimen_6" />

</androidx.constraintlayout.widget.ConstraintLayout>

选项卡选择器：

<?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" />

    <item android:drawable="@drawable/default_dot" />
</selector>

选定状态可绘制：

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dimen_3"/>
    <solid android:color="#FFFF0000"/>
    <size android:height="@dimen/dimen_6" android:width="@dimen/dimen_20"/>
</shape>

未选中状态可绘制：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="@dimen/dimen_0"
            android:shape="ring"
            android:thickness="@dimen/dimen_6"
            android:useLevel="false">
            <solid android:color="#80FF0000" />
        </shape>
    </item>
</layer-list>

Answer 1

对于未选中的：

<shape android:shape="oval">
        <solid android:color="#80FF0000" />
        <size
           android:width="4dp"
           android:height="4dp" />
</shape>