Custom tab indicator form in Design Design TabLayout widgets

Question

Custom tab indicator form in Design Design TabLayout widgets

In fact, by default the tabs are in the shape of a rectangle, but I want to create a custom shape. I did some encoding, but now there is a space between the tabs, and I want them all to be together. Please, help!

What I've done

But what I'm trying to do :

MainActivity.java

    final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.addTab(tabLayout.newTab().setText("First"));
    tabLayout.addTab(tabLayout.newTab().setText("Second"));
    tabLayout.addTab(tabLayout.newTab().setText("Third"));
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

activity_main.xml

    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="27dp"
    android:minHeight="?attr/actionBarSize"
    app:tabBackground="@drawable/customtabhandler"
    />

customtabhandler.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Non focused states -->
<item android:state_selected="false"
    android:drawable="@drawable/defualttab" />

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item  android:state_selected="true"
    android:drawable="@drawable/onselectedtab" />

defualttab.xml

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size
            android:width="95dp"
            android:height="20dp" />
        <solid android:color="#ff30a3b6" />
    </shape>
</item>

onselectedtab.xml

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size
            android:width="95dp"
            android:height="20dp" />
        <solid android:color="#89aaaaaa" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout background -->
<item
    android:right="100dp"
    android:left="-100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ff30a3b6" />
        </shape>
    </rotate>
</item>

<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout background -->
<item
    android:right="-100dp"
    android:left="100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ff30a3b6" />
        </shape>
    </rotate>
</item>