Android XTabLayout Modify Text Size And Indicator Width

Added support to modify text size and indicator width based on the original TabLayout.

XTabLayout-TabLayout that can modify the font size and indicator length of the selected item

XTabLayout is an extension of the functions based on the TabLayout in the design package. On the basis of retaining the original functions, it increases the font size of the selected item, the length of the indicator, and limits the number of tabs displayed on the screen.

Integration steps:

1.Add XTabLayout dependency library

Add the following references to dependencies in build.gradle in the app directory:

compile 'com.androidkun:XTabLayout:1.1.4'

2. Set the XTabLayout property in the layout file

<com.androidkun.xtablayout.XTabLayout
    android:id="@+id/xTablayout"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:xTabMode="scrollable"
    app:xTabIndicatorColor="#0f0"
    app:xTabIndicatorHeight="4dp"
    app:xTabIndicatorWidth="15dp"
    app:xTabSelectedTextColor="#f00"
    app:xTabTextColor="#000"
    app:xTabTextSize="15sp"
    app:xTabSelectedTextSize="20sp"/>

TabLayout has attributes that are available in XTabLayout. The attribute names are preceded by an x, and the trailing t becomes uppercase.

Added xTabIndicatorWidth to set the indicator length, xTabTextSize to set the font size of unselected items, and xTabSelectedTextSize to set the font size of selected items.

In addition, the following attributes were added in version 1.0.1 to set the number of tabs displayed in the screen range.

app:xTabDisplayNum="3"

Or add in code

tabLayout.setxTabDisplayNum(3);//需要写在setupWithViewPager前
tabLayout.setupWithViewPager(viewPager);

Here we are limited to 3, then the width of each tab is 1/3 of the screen, the display effect is as follows:

Note that the number of displayed items will be affected by the Adapter's ItemCount. For example, ItemCount is 3, but we set app: xTabDisplayNum = "4", then the width of the displayed tab is actually 1/3 of the screen, not 1/4.

3. initialization

The use of XTabLayout is the same as TabLayout, the code is as follows:

 //将TabLayout和ViewPager关联起来。
XTabLayout tabLayout = (XTabLayout) findViewById(R.id.xTablayout);
tabLayout.setupWithViewPager(viewPager);

Change log

1.0.3

Fixed a bug where the tab does not fill the screen when there is only one tab.

1.0.4

Added the ability to set the tab background color.

app:xTabBackgroundColor="#fff"
app:xTabSelectedBackgroundColor="#ff0"

The two attributes correspond to the unselected and selected background colors of the tab, respectively. The effect is as follows:

1.0.5 & 1.0.6

Added the function of setting the indicator length to the length of the tab text content.

How to use: Do not set the xTabIndicatorWidth property

1.0.7

Added caption case conversion function, default lowercase does not automatically convert to uppercase

How to use: add app: xTabTextAllCaps = "false" in the xml file or call xTabLayout.setAllCaps (false) in the code;

1.0.8

Add the function of setting the dividing line

How to use:

1.xml:

app:xTabDividerWidth="2dp"
app:xTabDividerHeight="15dp"
app:xTabDividerColor="#000"
app:xTabDividerGravity="center"

When the xTabDividerHeight property is not set or is set to 0, the height of the dividing line is full.

2.java:

tabLayout.setDividerSize(5,20);
tabLayout.setDividerColor(Color.BLACK);
tabLayout.setDividerGravity(DividerDrawable.CENTER);

The second parameter in the setDividerSize method is the height. If it is set to 0, the height of the dividing line is full.

1.0.9

Optimized indicator length function

How to use:

a. Specify the indicator to a certain length then set xTabIndicatorWidth

b. Specify the indicator length to follow the text change then set xTabDividerWidthWidthText

c. If the indicator length is required to be full, neither property is set, and the default is full.

1.1.0

Added the function of setting font bold

How to use:

    <!-- 设置选中Tab的文本是否粗体显示-->
    app:xTabTextSelectedBold="true"
      <!-- 设置未选中Tab的文本是否粗体显示-->
    app:xTabTextBold="true"

1.1.4

Fix feedback bug

Download From GitHub

Download Full Project Code From GitHub