This post is on CSDN blog

In this paper, Jane books

Note: use the new attributes you need to set up implementation ‘com. Android. Support: design: 28.0.0’

Add TabLayout to the layout, default is underline style, you can use tabIndicatorGravity property set to: Bottom (the default, you can leave it empty, and the indicator is displayed at the bottom), TOP (the indicator is displayed at the top), Center (the indicator is displayed in the middle), and stretch (the indicator is stretched all over the item).

<android.support.design.widget.TabLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/colorPrimary" app:tabIndicatorFullWidth="true" <! Set Indicator height --> app:tabIndicatorHeight="2dp" app:tabMode="scrollable" />Copy the code

1. The “app: tabIndicatorFullWidth” attribute

Note the app: tabIndicatorFullWidth = “true” attribute, is set to true, is Indicator of the width of the item:

Set Indicator to false to keep the width of the item content consistent:

2. Set margins for Indicators

A common practice on the web is to set the width of the Indicator by reflection. See the blog for a summary of Android practice on changing TabLayout width (Indicator)

But I think you can use layer-list. Create an indicator. XML file in the Drawable folder:

<? The XML version = "1.0" encoding = "utf-8"? > <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item <! Android :left="15dp" <! --> Android :right="15dp"> <! <shape /> </item> </layer-list>Copy the code

Note that setting the color in shape is not effective. You need to set the Indicator color in the layout file.

Add Indicator to TabLayout:

<android.support.design.widget.TabLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="wrap_content" <! -- Set Indicator height --> APP :tabIndicatorHeight="2dp" <! App :tabIndicatorColor="@color/colorPrimary" <! App :tabIndicator="@drawable/ Indicator "app:tabMode="scrollable" />Copy the code

3. Rounded corners for indicators

If you don’t need margin, only rounded corners, can cooperate with app: tabIndicatorFullWidth attributes, using the shape set app: tabIndicator to implement rounded corners can, without using the layer – the list, the code posted ~ you don’t have to

Set the Indicator to a height of 5dp to make the effect more noticeable. Added 5dp rounded corners to Indicator:

<?xml version="1.0" encoding="utf-8"? >
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="15dp"
        android:right="15dp">
        <shape>
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>
Copy the code

4. Set width and height for Indicator

4.1 in<shape> 的 <size>Set width and height in the TAB (API 23 and above) :

<?xml version="1.0" encoding="utf-8"? >
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <! -- If gravity is not set, Indicator width will fill the entire item -->
    <item android:gravity="center_horizontal">
        <shape>
            <corners android:radius="5dp" />
            <size
                android:width="20dp"
                android:height="5dp" />
        </shape>
    </item>
</layer-list>
Copy the code

4.2 inlayer-listto<item>Label setting width and Height (API 23 and above) :

<? The XML version = "1.0" encoding = "utf-8"? > <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:width="20dp" android:height="5dp" <! Gravity is displayed left by default if gravity is not set. Android :gravity="center_horizontal"> <shape> <corners Android :radius="5dp" /> </shape> </item> </layer-list>Copy the code

5. TabIndicator attribute source code analysis

The layer-list set in tabIndicator property of TabLayout does not support color setting. TabLayout_tabIndicator (TabLayout_tabIndicator)

this.setSelectedTabIndicator(MaterialResources.getDrawable(context, a, styleable.TabLayout_tabIndicator));
Copy the code

SetSelectedTabIndicator () method:

tabSelectedIndicator
SlidingTabIndicator
draw()
tabSelectedIndicator

selectedIndicatorHeight

selectedIndicatorHeight
TabLayout
tabIndicatorHeight

If we set tabIndicatorHeight to a TabLayout, IndicatorHeight takes precedence over tabIndicatorHeight. Otherwise, we will take the height of our custom drawable.

Continue, tabSelectedIndicator 2

drawable
TabLayout_tabIndicatorColor
<stroke>

6. Customize complex Indicator styles

If you need a more complex style, such as

. Start with indicator. XML when TAB is selected:

<? The XML version = "1.0" encoding = "utf-8"? > <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item <! Android :right="8dp" Android :top=" 8DP "> <shape> <! <corners android:radius="5dp" /> <! <stroke Android :width="1dp" Android :color="@color/colorAccent" /> </shape> </item> </layer-list>Copy the code

You also need a selector. XML:

<?xml version="1.0" encoding="utf-8"? >
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/indicator" android:state_selected="true" />
</selector>
Copy the code

Next, we’re going to set the tabBackground, the TAB TAB background, not the tabIndicator, so we’re going to set the Indicator height to 0, not the tab-native Indicator.

There’s another thing to be careful about heretabRippleColorProperty to set the color of the ripple when the TAB is clicked. When not set, the default color is gray, as shown in the screenshot above. To remove this effect, set the color to transparent.

<android.support.design.widget.TabLayout android:id="@+id/tl" android:layout_width="match_parent" android:layout_height="wrap_content" <! App :tabBackground="@drawable/selector" <! App :tabIndicatorHeight="0dp" APP :tabMode="scrollable" <! Click - set of corrugated color to transparent - > app: tabRippleColor = "@ android: color/transparent" / >Copy the code

MagicIndicator

Attached is an illustration that feels cool: