In this article, I will not repeat too much about how to customize the style of TabLayout, but simply talk about how to customize the separator Divider of TabLayout.
As shown in the figure below, it is the page effect to be realized:
It can be seen that unlike the General Tab indicator of ViewPager, there is no indicator bar below the text, instead, there is a separator between tabs, and this separator has the requirement of upper and lower spacing.
Nonsense, show me the fxcking code directly!!!
tab in activity:
<android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="32dp" android:background="#ffffff" //Set background color app:tabIndicatorHeight="0dp" //Horizontal bar height set to0dp app:tabPaddingEnd="20dp" app:tabPaddingStart="20dp" app:tabSelectedTextColor="#FEDA44" //tab selected color app:tabTextColor="#000000"> //Unselected text color </android.support.design.widget.TabLayout>
The custom style file Divider vertical.xml for the separator dividerunder the drawable folder:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#EDECEB"/> <size android:width="1dp"/> <padding android:bottom="9dp"/> <padding android:top="9dp"/> </shape>
Set in Java file:
mTabs.setTabMode(TabLayout.MODE_FIXED); //This mode can be used when there are fewer tabs and the screen is full; mTabs.setTabGravity(TabLayout.GRAVITY_FILL); //Used with TabMode to divide the full width of TabLayout equally for each label LinearLayout linearLayout = (LinearLayout) mTabs.getChildAt(0); linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.divider_vertical)); //Set the drawable of the divider linearLayout.setDividerPadding(SizeUtils.dip2px(this, 9)); //The parameter passed in by this method is the size of pixel, so the method of dp to px is needed
So far, we have implemented the method of customizing the separation line of TabLayout. Have you also found the power of TabLayout? This article is very short, which is still very useful. If any little partner encounters such a problem, this article helps you solve the doubt. Please like it