Setting the TabLayout indicator

Question

I was looking for how to change the indicator in a tablayout to circular like this

but I don’t know how to do this, any help!

Answer 1

From the source code, the tab indicator is defined as:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
        <item name="tabMaxWidth">@dimen/design_tab_max_width</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    </style>

and the tabIndicatorColor attribute is defined as:

<declare-styleable name="TabLayout">
        <attr name="tabIndicatorColor" format="color"/>
        <attr name="tabIndicatorHeight" format="dimension"/>

therefore, I believe that you cannot change it to stretchable (shape), you can only change color.

An alternative is to define a custom tab view and manage the indicator state yourself

Answer 2

1) Create layouts for your tab states (Ex: tab_selected.xml and tab_unselected.xml)

2) :

//get your tab item
TabLayout.Tab tabItem = tabLayout.getTabAt(i);
//inflate your layout to a view and set it as the tab custom view
tabItem.setCustomView(customView);

3) , setOnTabSelectedListener, ( setCustomView)

Answer 3

I think you should use a custom tab view and change it using TabLayout.OnTabSelectedListener