CODEWITHSUNDEEP
android
user13352267
user13352267

Reputation:

Android Tab layout: Wrap tab indicator width to 4dp always irrespective of title content

I m using target sdk 30 & implementation 'com.google.android.material:material:1.3.0'

I need to show tab layout with tab indicator width as 4dp with viewpager2, currently i m able to shown tabs but the tab indicator width is as same as title content, so my question is how to reduce the width of tab indicator & shown in center to title content in android.

I need to shown tab indicator in center with width as 4dp.

Any help is appreciated

Upvotes: 1

Views: 2985

Answers (2)

Muhammad Khizzar Mansoor
Muhammad Khizzar Mansoor

Reputation: 61

As by default the tab indicator's width changes as per the text of the tab. I solved this by giving the width/height to the custom drawable i needed for the tabindicator like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:state_selected="false">
    <layer-list>
        <item android:width="20dp"
            android:height="2dp"
            android:drawable="@drawable/white_underline"
            android:left="20dp"
            android:right="20dp"
            android:top="10dp" />
    </layer-list>
</item>

This is the drawable i created to use a custom tab indicator width/height to make it irrrespective to the text of the tab and spacing to even out the spacing between the text and the tab. Also you need to set this property in the tabLayout

app:tabIndicatorFullWidth="false"

Upvotes: 0

Mirian Fonkam
Mirian Fonkam

Reputation: 107

I struggled find a solution online to a similar problem. Fortunately, I was able to do a work around that worked:

TabLayout Config

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextAppearance="@style/CustomTabTextAppearance"
    app:tabIndicator="@drawable/ic_custom_tab_indicator"
    app:tabIndicatorColor="@color/custom_color"
    app:tabIndicatorFullWidth="false" />

The key points here:

  • Set tabIndicatorFullWidth="false". It is by default true.
  • Set app:tabIndicator="@drawable/ic_custom_tab_indicator"

Create Custom indicator drawable resource

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="4dp"
        android:height="6dp"
        android:gravity="center_horizontal">
        <shape android:shape="rectangle">
            <solid android:color="@color/black" />
        </shape>
    </item>
</layer-list>

Now, your custom indicator will be center aligned and with fixed width for all tabs.

If you want, you can increase the android:width\height size as needed. In my case, I used width=40dp.

How I arrived at this solution

I was examining the tabIndicator attributes ([tab indicador][1]).

When I attempted to manipulate the app:tabIndicatorHeight="" the system stated:

{@deprecated Instead, set the intrinsic size of the custom drawable provided to the tabIndicator attribute in order to change the indicator height. For example, this can be done by setting the
property in a resource.}

So, that's the recommended way to change the height/width of a tabIndicator.

Upvotes: 3

Related Questions