Tablayout usage details (modify text size, underline style, etc.)

Catalog

effect ：

rely on ：

Code mode ：

XML The way ：

relation ViewPager：

Common properties ：

All attributes ：

Advanced usage ：

Set icon

Add listening

Select by default or specify that

Writing style

The underline width is equal to the text

Underline style

Github：

effect ：

This is how the official website introduces ：

TabLayout provides a horizontal layout to display tabs. （ Horizontal tab ）

rely on ：

implementation 'com.google.android.material:material:1.2.1'

Copy

Code mode ：

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

Copy

XML The way ：

 <android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

Copy

relation ViewPager：

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:tabIndicatorColor="@color/red"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/gray"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Copy

Java Code ：

mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

Copy

// Set up adapter
        mViewPager.setAdapter(new SimpleFragmentPagerAdapter(getSupportFragmentManager()));
        // relation viewpager
        mTabLayout.setupWithViewPager(mViewPager);

Copy

private class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

        private String tabTitles[] = new String[]{"tab1", "tab2", "tab3"};
        private Fragment[] mFragment = new Fragment[]{new Fragment1(), new Fragment2(), new Fragment3()};

        private SimpleFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragment[position];
        }

        @Override
        public int getCount() {
            return mFragment.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabTitles[position];
        }

    }

Copy

In this way, most of the requirements can be basically realized

Common properties ：

• app:tabIndicatorColor="@color/red"  The color of the indicator
• app:tabIndicatorHeight  The height of the indicator , Remove the indicator and set it directly 0dp
• app:tabMode="fixed"  Display mode ,fixed Indicates that the display is divided equally ,scrollable The slide show
• app:tabSelectedTextColor="@color/black" Select the text color
• app:tabTextColor="@color/gray"  Unselected text color
• app:tabMinWidth="50dp"  Minimum width , Can be controlled tab Width , Including the width of the indicator
• app:tabMaxWidth="100dp"  Maximum width

All attributes ：

Advanced usage ：

Set icon

mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);

Copy

Add listening

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                // Choose 
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                // Not selected 
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                // Checked again 
            }
        });

Copy

Select by default or specify that

mTabLayout.getTabAt(position).select();

Copy

relation ViewPager If yes, select Viewpager It's the same

mViewPager.setCurrentItem(position);

Copy

Text size 、 style

app:tabTextAppearance="@style/MyTabLayout"

Copy

    <!--TabLayout font size -->
    <style name="MyTabLayout">
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textAllCaps">false</item>
    </style>

Copy

textAllCaps  Set case 

Copy

The underline width is equal to the text

app:tabIndicatorFullWidth="false"

Copy

Underline style

app:tabIndicator="@drawable/shape_tab_indicator"

Copy

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="15dp"
        android:height="5dp"
        android:gravity="center">
        <shape>
            <corners android:radius="5dp" />
            <!--color Invalid , Source code tabIndicatorColor-->
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

Copy

Width 、 Height 、 Fillet, etc

Github：

https://github.com/yechaoa/MaterialDesign