Introduction to the

TabLayout is a page-switching indicator provided by the Material Design package.

TabLayout can be added by creating an instance of tabLayout.tab. The following is an example:

TabLayout tabLayout = ... ; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));Copy the code

Tablayout.tab instances can change tabs’ labels or ICONS via setText and setIcon, respectively.

TabLayout + ViewPager

If ViewPager and TabLayout are used together, you can associate the two with setupWithViewPager(ViewPager), in which case the TabLayout will populate the TAB with Pager Title. The following is an example of ViewPager + TabLayout:

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp"/> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>Copy the code
class MyFragmentPagerAdapter(private val context: Context, fragmentManager: FragmentManager, private val pagerFragments: List<Fragment>): FragmentPagerAdapter(fragmentManager, FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position: Int): Fragment {
        return pagerFragments[position]
    }

    override fun getCount(): Int {
        return pagerFragments.size
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return String.format(context.resources.getString(R.string.appbar_sample_format), position)
    }
}
Copy the code
viewPager.adapter = MyFragmentPagerAdapter(this, supportFragmentManager, pagerFragmengs)
tabLayout.setupWithViewPager(viewPager)
Copy the code

Event listeners

TabLayout adds OnTabSelectedListener to listen for TAB events.

/** * public void onTabSelected(T TAB); Public void onTabUnselected(T TAB); public void onTabUnselected(T TAB); Public void onTabReselected(T TAB); public void onTabReselected(T TAB);Copy the code

TabLayout XML attributes

attribute Introduction to the value
tabIndicatorColor Indicator color color
tabIndicatorHeight Indicator height dp\sp
tabIndicatorFullWidth Whether the indicator width is tabbed width boolean
tabBackground TAB background color\drawable
tabMode How tabs behave in a layout scrollableSlide;fixedFull screen width;autoThe adaptive
tabInlineLabel Whether the text and Icon are horizontal boolean
tabMinWidth Minimum TAB width dp\sp
tabMaxWidth Maximum width dp\sp
tabTextAppearance Writing style style
tabTextColor Text color color
tabSelectedTextColor Text selection color color
tabIconTint Icon color blending color
tabIconTintMode Color blending mode
tabRippleColor Click on the water ripple effect color color
tabUnboundedRipple Whether to use the unbounded water ripple effect boolean

The custom Tab

TabLayout is made up of tabs. You can get the specified Tab using the getTabAt method, and modify ICONS and text using setIcon and setText. You can also use a custom layout instead of a Tab layout, using the setCustomView method to modify the Tab layout.

The following is an example of a custom TabLayout:

val view = LayoutInflater.from(this).inflate(R.layout.item_tab_layout, null) val ivTabIcon = view.findViewById<ImageView>(R.id.ivTabIcon) val tvTabContent = view.findViewById<TextView>(R.id.tvTabContent) ivTabIcon.setImageResource(tabIcons[i]) tvTabContent.text = pageTitles[i]  tabLayout.getTabAt(i)?.customView = viewCopy the code