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:
Is it not possible to get this design 1:1 implemented ? Thanks !