Custom indicator in Android

Question

I need to do a custom tab indicator for my tab layout. It will be linked to a ViewPager with a TabLayoutMediator. The layout that I need is this:

And I am currently getting this:

Anyone knows why? You can see my XML code below.

Layout where TabLayout is:

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

Tab Selector:

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

Selected state drawable:

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

Unselected state drawable:

<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

for unselected:

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

Answer 2

Because your TabLayout height is @dimen/dimen_6, and your oval shape thickness is @dimen/dimen_6 (android:thickness="@dimen/dimen_6"), so your circle is as big double, you just need to lower the shape thickness to 1/2 the height of the TabLayout, in this case Unselected state drawable should be @dimen/dimen_3:

<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_3"
             android:useLevel="false">
             <solid android:color="#80FF0000" />
         </shape>
     </item>
 </layer-list>