How to change selected tab title textSize in Android

Question

I am trying to find a way to change text size of Tab Title when selected. Until now without exit. Hope someone can help me.

My code bellow:

XML

Answer 1

use this code

for (int i = 0; i < tabLayout.getTabCount(); i++) {

    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {

        TextView tabTextView = new TextView(this);
        tab.setCustomView(tabTextView);

        tabTextView.getLayoutParams().width = ViewGroup.LayoutParams.WRAP_CONTENT;
        tabTextView.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;

        tabTextView.setText(tab.getText());

        if (i == 0) {
            tabTextView.setTextSize(16);
        }

    }

}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(tab.getPosition());
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTextSize(16);
            }
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(tab.getPosition());
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTextSize(14);
            }
        }
    }
}

Answer 2

I would recommend to set custom tab.

First you need to initiate your custom tabs, otherwise it won't change anything.

1. Create a new layout with a TextView (you can add whatever you want to be in each tab).

2. In your onActivityCreated after your tabLayout.setupWithViewPager initiate your custom tabs:

   for (int i = 0; i < 3; i++) { // 3 - A+B+C in your example
       TabLayout.Tab tab = tabLayout.getTabAt(i);
       if (tab != null) {
           ViewGroup tabContainer = (ViewGroup) LayoutInflater.from(this).inflate(R.layout.custom_tab_item, tabLayout, false);
           if (tabContainer != null) {
               TextView yourTv = (TextView) tabContainer.findViewById(R.id.tv); 
               yourTv.setTextSize(18);
               tab.setCustomView(tabContainer);
           }
       }
   }
   

3. Add listener tabLayout.addOnTabSelectedListener and Implement TabLayout.OnTabSelectedListener, In your onTabSelected use this:

   for (int i = 0; i < tabLayout.getTabCount(); i++) {
       TabLayout.Tab tab = tabLayout.getTabAt(i);
       if (tab != null) {
           View customView = tab.getCustomView();
           if (customView != null) {
               TextView yourTv = (TextView) customView.findViewById(R.id.tv);
               if (yourTv != null) {
                   if (i == selectedTabIndex) {
                       yourTv.setTextSize(18);
                   } else {
                       yourTv.setTextSize(16);
                   }
               }
           }
       }
   }
   

Answer 3

You can set your own view to the TabLayout's individual tabs and you can change the size latter on the tab selection-

Here is the code hint -

        TabLayout mTabLayout = (TabLayout) findViewById(R.id.tab_layout);

        TabLayout.Tab tabOne = mTabLayout.newTab();
        tabOne.setCustomView(getLayoutInflater().inflate(R.layout.item_tab, mTabLayout, false));
        mTabLayout.addTab(tabOne);

        TabLayout.Tab tabTwo = mTabLayout.newTab();
        tabTwo.setCustomView(getLayoutInflater().inflate(R.layout.item_tab, mTabLayout, false));
        mTabLayout.addTab(tabTwo);
        tabTwo.select();
        // mTabLayout.setupWithViewPager(mViewPager);
        if (getResources().getDisplayMetrics().widthPixels > getResources().getDisplayMetrics().heightPixels) {
            mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        } else {
            mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        }


        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                ((TextView) tab.getCustomView().findViewById(R.id.text1)).setTextSize(16);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                ((TextView) tab.getCustomView().findViewById(R.id.text1)).setTextSize(13);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

iteb_tab.xml can be like -

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:text="One"
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

You can further synchronize the selection with viewpager page change as

            mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            @Override
            public void onPageSelected(int position) {
                mTabLayout.getTabAt(position).select();
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

Edit

You can further reduce your effort by setting your tab titles from the adapter itself -

        PagerAdapter mPagerAdapter = mViewPager.getAdapter();
        for (int position = 0; position < mPagerAdapter.getCount(); position++) {
            View view = (getLayoutInflater().inflate(R.layout.item_tab, mTabLayout, false));
            TextView label = (TextView) view.findViewById(R.id.text1);
            label.setText(mPagerAdapter.getPageTitle(position));
            TabLayout.Tab tab = mTabLayout.newTab();
            tab.setCustomView(view);
            mTabLayout.addTab(tab);
        }

Here is how it looks -