0

TabLayout indicator requirement

Here's a design requirement for our project, as far as I know the TabLayout is highly customisable but it has it's limitations.

So far I've tried the below:

<com.google.android.material.tabs.TabLayout
            android:id="@+id/xxx"
            android:layout_width="340dp"
            android:layout_marginStart="44dp"
            android:layout_height="12dp"
            android:layout_alignBottom="@id/constraintLayout"
            app:tabBackground="@drawable/tablayout_unselected"
            app:tabGravity="center"
            app:tabPadding="12dp"
            app:tabContentStart="6dp"
            app:tabPaddingTop="6dp"
            app:tabIconTint="@color/black"
            app:tabIndicator="@drawable/tablayout_selected"
            app:tabIndicatorAnimationDuration="250"
            app:tabIndicatorAnimationMode="elastic"
            app:tabIndicatorColor="@color/carbon_black"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorGravity="stretch"
            app:tabIndicatorHeight="6dp"
            app:tabMinWidth="66dp"
            app:tabMode="scrollable"
            app:tabPaddingEnd="-28dp"
            app:tabPaddingStart="-28dp"
            app:tabRippleColor="@color/carbon_red_a700"
            app:tabSelectedTextColor="@color/black"
            app:tabTextColor="@android:color/black"
            app:tabUnboundedRipple="true" />

Non-selected tab XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                    android:angle="0"
                    android:startColor="@color/carbon_black_6"
                    android:endColor="@color/black"/>
            <corners
                    android:radius="20dp"/>
            <stroke
                    android:width="1dp"
                    android:color="@color/black"/>
        </shape>
    </item>
</selector>

Selected tab XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                    android:angle="0"
                    android:startColor="@color/black"
                    android:endColor="@color/blinqDarkerRed"/>
            <corners
                    android:radius="20dp"/>
        </shape>
    </item>
</selector>

below is how this looks and this is as close as I could get to the design: wtf

Is it not possible to get this design 1:1 implemented ? Thanks !

Kaan
  • 63
  • 1
  • 6

0 Answers0