How do I change the text style of a selected tab when using tabLayout?

Question

I want to make the text of a selected tab bold. How can I do this either through xml or java code, whatever is easier.

Answer 1

Hello Friends Try This

first add this method

  private void updateCounter() {
    try {
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            updateTab(tabLayout.getTabAt(i));
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

second add this Method

   private void updateTab(TabLayout.Tab tab) {
    Method method;
    try {
        method = TabLayout.Tab.class.getDeclaredMethod("getCustomView");
        method.setAccessible(true);

        View tabView = (View) method.invoke(tab, new Object[0]);

        TextView tv_title = null;

        if (tabView != null) {
            tv_title = tabView.findViewById(R.id.tv_title);
        }

        switch (tab.getPosition()) {
            case 0:
                if (tv_title != null) {
                    tv_title.setText(tabTitle[0]);

                    if(viewPager.getCurrentItem() == 0){
                        tv_title.setTypeface(CustomerApplication.getInstance().getMontserratBold());
                    }else{
                        tv_title.setTypeface(CustomerApplication.getInstance().getMontserratMedium());
                    }
                }
                break;

            case 1:
                if (tv_title != null) {
                    tv_title.setText(tabTitle[1]);

                    if(viewPager.getCurrentItem() == 1){
                        tv_title.setTypeface(CustomerApplication.getInstance().getMontserratBold());
                    }else{
                        tv_title.setTypeface(CustomerApplication.getInstance().getMontserratMedium());
                    }
                }
                break;
        }
        tab.setCustomView(tabView);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

last call view pager change listener

private final ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        updateCounter();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
};

Answer 2

This is a Kotlin code for this solution

 for (i in 0..tabLayout.tabCount){
        val tab:TabLayout.Tab? = tabLayout.getTabAt(i)
        if (tab != null){
            val tabTextView:TextView = TextView(this)
            tab.customView = tabTextView

            tabTextView.layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT
            tabTextView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT

            tabTextView.text = tab.text

            if (i == 0){
                // This set the font style of the first tab
                tabTextView.setTypeface(null,BOLD)
                
            }
            if (i == 1){
                // This set the font style of the first tab

                tabTextView.setTypeface(null,NORMAL)
                
            }
        }
    }
    tabLayout!!.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab?) {
            viewPager.currentItem = tab!!.position

            val text:TextView = tab.customView as TextView

            
            text.setTypeface(null,BOLD)
            


        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
            val text:TextView = tab?.customView as TextView


            text.setTypeface(null,NORMAL)
            

        }

        override fun onTabReselected(tab: TabLayout.Tab?) {

        }

    })

Answer 3

I changed the answer suggested above a bit and it works great for me, no additional .xml files needed, hope it will help.

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());

        // First tab is the selected tab, so if i==0 then set BOLD typeface
        if (i == 0) {
            tabTextView.setTypeface(null, Typeface.BOLD);
        }

    }

}

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());

        TextView text = (TextView) tab.getCustomView();

        text.setTypeface(null, Typeface.BOLD);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        TextView text = (TextView) tab.getCustomView();

        text.setTypeface(null, Typeface.NORMAL);
    }

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

    }

});

Answer 4

       tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.account_active));
          if (tab.getPosition()==0){
              tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.booking_active));
          }
          if(tab.getPosition()==1){
              tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.account_active));
          }
        }

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

            if (tab.getPosition()==0){
                tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.booking_deacive));
            }
            if(tab.getPosition()==1){
                tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.account_deactive));
            }
        }

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

            if (tab.getPosition()==0){
                tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.booking_active));
            }
            if(tab.getPosition()==1){
                tab.getCustomView().setBackgroundDrawable(getResources().getDrawable(R.mipmap.account_active));
            }
        }
    });

    setupTabIcons();

Answer 5

If you use default TabLayout (not customView), you can get TextView of tab by using getChildAt() method.

.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            LinearLayout tabLayout = (LinearLayout)((ViewGroup) mMainTabs.getChildAt(0)).getChildAt(tab.getPosition());
            TextView tabTextView = (TextView) tabLayout.getChildAt(1);
            tabTextView.setTypeface(tabTextView.getTypeface(), Typeface.BOLD);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            LinearLayout tabLayout = (LinearLayout)((ViewGroup) mMainTabs.getChildAt(0)).getChildAt(tab.getPosition());
            TextView tabTextView = (TextView) tabLayout.getChildAt(1);
            tabTextView.setTypeface(tabTextView.getTypeface(), Typeface.NORMAL);
        }

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