Space between Dots in a TabLayout

Question

I have the following Fragment with a TabLayout with 2 Tabs. Each Tab is filled with one dot to represent the page inside the viewpager.

How can I set space / padding / margin between the 2 Tabs with the dots inside?

I tried several things out, but nothing works for me.

Thanks for your help :)

fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

       <androidx.viewpager.widget.ViewPager
           android:layout_height="match_parent"
           android:layout_width="match_parent"
           android:id="@+id/pager"
         />

       <com.google.android.material.tabs.TabLayout
           android:id="@+id/tabDots"
           android:layout_alignParentBottom="true"
           android:layout_width="match_parent"
           android:layout_height="7.5dp"
           app:tabBackground="@drawable/dot_selector"
           app:tabGravity="center"
           app:tabIndicatorHeight="0dp"
           android:layout_marginBottom="20dp"
           app:tabMaxWidth="7.5dp"
           />

    </RelativeLayout>

dot_selector.xml :

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

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

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

dot_selected.xml :

    <?xml version="1.0" encoding="utf-8"?>
<shape
    android:innerRadius="0dp"
    android:shape="rectangle"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorBlack"/>
    <corners android:radius="1000dp"/>
</shape>

dot_default.xml :

   <?xml version="1.0" encoding="utf-8"?>
<shape
    android:innerRadius="0dp"
    android:shape="rectangle"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorGrey"/>
    <corners android:radius="1000dp"/>
</shape>

Answer 1

Use padding like:

app:tabPaddingStart="10dp"
app:tabPaddingEnd="10dp"

Answer 2

You are Using

       <com.google.android.material.tabs.TabLayout
       android:id="@+id/tabDots"
       android:layout_alignParentBottom="true"
       android:layout_width="match_parent"
       android:layout_height="7.5dp"
       app:tabBackground="@drawable/dot_selector"
       app:tabGravity="center"
       app:tabIndicatorHeight="0dp"
       android:layout_marginBottom="20dp"
       app:tabMaxWidth="7.5dp"              //here is the problem
       />

Increase tabMaxWidth to have desired space between dots.