Android ViewPager and TabLayout: How to have Linear (Rectangle) Indicator's between margins

Question

As I mentioned on the title how can I add a space between linear (Rectangle) indicators? I want to make tab indicator full width in center, I want to give a marginEnd and marginStart for each tab. I tried but still could not to do it. Please give me advice/clue! I'll glad!. Thank you!

My codes look like:

FragmentTest.xml

    <?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"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_topEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_top_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_bottomEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_bottom_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_horizontal_middleEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_horizontal_middle_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_vertical_middleEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_vertical_middle_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_startEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_start_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_endEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_end_edge" />

            <androidx.viewpager.widget.ViewPager
                android:id="@+id/fragment_test_vp_"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="horizontal"
                app:layout_constraintStart_toEndOf="@id/fragment_test_gdl_startEdge"
                app:layout_constraintEnd_toStartOf="@id/fragment_test_gdl_endEdge"
                app:layout_constraintTop_toBottomOf="@id/fragment_test_gdl_topEdge"
                app:layout_constraintBottom_toTopOf="@id/fragment_test_tl_tab"/>

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/fragment_test_tl_tab"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:tabIndicatorHeight="0dp"
                app:tabGravity="center"
                app:tabBackground="@drawable/viewpager_tab_line_selector"
                app:layout_constraintStart_toEndOf="@id/fragment_test_gdl_startEdge"
                app:layout_constraintEnd_toStartOf="@id/fragment_test_gdl_endEdge"
                app:layout_constraintTop_toBottomOf="@id/fragment_test_vp_"
                app:layout_constraintBottom_toTopOf="@id/fragment_test_gdl_bottomEdge"/>


        </androidx.constraintlayout.widget.ConstraintLayout>

viewpager_unselected_line.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background"
            android:gravity="center_vertical|fill_horizontal">
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <size android:height="3dp" />
                <solid android:color="@color/tab_default" />
            </shape>
        </item>
    </layer-list>

viewpager_selected_line.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background"
            android:gravity="center_vertical|fill_horizontal">
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <size android:height="5dp" />
                <solid android:color="@color/tab_selected" />
            </shape>
        </item>
    </layer-list>

viewpager_tab_line_selector.xml

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

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

        <item
            android:drawable="@drawable/viewpager_unselected_line"
            android:state_selected="false"
            android:state_focused="false"
            android:state_pressed="false"/>

    </selector>

Above Code Shown as like this. Image is here

Answer 1

Try giving padding in the layerlistitem like below for viewpager_selected_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle">
            <corners android:radius="8dp"/>
            <size android:height="5dp" />
            <solid android:color="@color/tab_selected" />
            <padding android:left="3dp" android:right="3dp"/>
        </shape>
    </item>
</layer-list>