0

I want to use custom drawable for TabLayout indicator like this enter image description here

but it is not showing the colors

lso

also unable to add custom width. As you can see that design has width that is not more than width of text, how I could to do that?

 <com.google.android.material.tabs.TabLayout
                        android:id="@+id/slidingTabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="top"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tabIndicator="@drawable/lines"
                        app:tabIndicatorHeight="6dp"
                        app:tabIndicatorFullWidth="false"
                        app:tabMode="fixed"
                        app:tabSelectedTextColor="#000"
                        app:tabTextAppearance="@style/CustomTextAppearanceTab"
                        app:tabTextColor="@color/bluey_grey" />

I've tried with both SVG and PNG

Thanks

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Bills
  • 768
  • 7
  • 19

1 Answers1

1

The default style applies a tint to the tabIndicator.
You can add in your layout (or in your style) the tabIndicatorColor.

    <com.google.android.material.tabs.TabLayout
        app:tabIndicatorColor="@color/..."
        ..>

You can use a color or you can use "@null" (it depends by your original drawable).

About the tab width you can use the app:tabMinWidth attribute.

    <com.google.android.material.tabs.TabLayout
        app:tabIndicatorFullWidth="true"
        app:tabMinWidth="125dp"
        ..>

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • When I just use `app:tabIndicatorColor="@null"` it is not showing any in indicator line – Bills Jul 15 '20 at 11:03
  • `app:tabMinWidth` is working for whole tab not for tab indicator – Bills Jul 15 '20 at 11:05
  • @Bills About the width sorry, my bad. You should add also `app:tabIndicatorFullWidth="true"` to achieve a result as in the screen. – Gabriele Mariotti Jul 15 '20 at 11:38
  • I don't want to match the indicator width with Tab but want to hard code the width of indicator i.e 46dp – Bills Jul 15 '20 at 11:57
  • @Bills In this case it is not so simple. There isn't an attribute to do it. There is an open issue on [googletracker](https://issuetracker.google.com/issues/128641683). Also check this [answer](https://stackoverflow.com/questions/40480675/android-tab-layout-wrap-tab-indicator-width-with-respect-to-tab-title): it is a workaround but I've tried it. – Gabriele Mariotti Jul 15 '20 at 14:43