Custom Tab indicator shape in Support Design Widget TabLayout

Actually by default tabs are of the rectangle shape but I want to make the custom shape. I have done some coding but now there is some space among the tabs and I want all of them together. Please help!

What I Have Done

But what I am trying to do is:

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's 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's 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>

Any help will be highly appreciated..

P.S. I have searched a lot on stackoverflow and all I found is for the older library but not for the new one..


Download custom.tab.indicator.shape.in.support.design.widget.tablayout.zip
Direct Link


Download


Download custom.tab.indicator.shape.in.support.design.widget.tablayout.zip
Mediafire


Download


Download custom.tab.indicator.shape.in.support.design.widget.tablayout.zip
2Shared


Download

Both comments and pings are currently closed.

Comments are closed.