0

I want to make tabIndicator bigger than icon in my Tabs to make it looks like selected Button. Although I don't see any option for this in native TabLayout. I need some padding around icon so indicator will not "hug" icon borders - ImageButton with icon effect.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingTop="@dimen/padding_small"
    android:paddingBottom="@dimen/padding_medium"
    app:tabIconTint="@color/tab_icon_tint"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabIndicatorColor="@color/tab_primary"
    app:tabIndicatorGravity="center"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="22dp"
    app:tabRippleColor="@null">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

</com.google.android.material.tabs.TabLayout>

indicator:

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="oval"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/tab_primary" />
</shape>

Preview:

enter image description here

martin1337
  • 2,384
  • 6
  • 38
  • 85

0 Answers0