What's the correct way to change each Tab text color in TabLayout when it is selected?

Question

I was wondering, I have a custom_tab_layout for the tabs in a TabLayout that only have a TextView with an id, however what I wanted to do is that when it gets clicked/selected the text of said TextView change its color, this next code works, however I'm not sure if it is the correct way to achieve this functionality since I'm a newbie with android and it feels there must be like a nicer approach to that. Here's the code with some comments! I'm just using a ViewPager and created a custom adapter class extending the FragmentPagerAdapter.

public class MainActivity extends AppCompatActivity{

public static class CategoryPagerAdapter extends FragmentPagerAdapter{

    private static int NUM_PAGES = 4;

    public CategoryPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {

        switch (position){

            case 0:{
                return new NumbersFragment();
            }

            case 1:{
                return new FamilyFragment();
            }

            case 2:{
                return new ColorsFragment();
            }

            case 3:{
                return new PhrasesFragment();
            }

            default:{
                return null;
            }

        }


    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_pager);

    TabLayout tlCategoryTab = this.findViewById(R.id.tlCategoryTab);
    final ViewPager vpPager = this.findViewById(R.id.vpPager);

    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));

    String [] categories = {"Numbers", "Family", "Colors", "Phrases"};

    for (int i = 0; i < categories.length; i++) {
        TabLayout.Tab tab = tlCategoryTab.getTabAt(i);

        //Here I get the custom tab layout
        View v = tab.getCustomView();

        //Assign the TextView and the Tab name
        TextView tvTabItem = v.findViewById(R.id.tvTabItem);
        tvTabItem.setText(categories[i]);

        //I was having issues when the app first started because it wasn't 
        //getting assigned the first color, so I came up with this kinda lame solution
        if(i == 0){
            tvTabItem.setTextColor(getResources().getColor(R.color.category_numbers));
            tab.setCustomView(v);
        }
    }

    CategoryPagerAdapter myAdapter = new CategoryPagerAdapter(this.getSupportFragmentManager());
    vpPager.setAdapter(myAdapter);
    vpPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tlCategoryTab));


    //And here is the actual functionality that changes the TextColor when it gets clicked/selected
    tlCategoryTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            int colorToUse = 0;

            View v = tab.getCustomView();
            TextView tvTabItem = v.findViewById(R.id.tvTabItem);

            if(tvTabItem.getText().toString().equalsIgnoreCase("Numbers")){
                colorToUse = R.color.category_numbers;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Family")){
                colorToUse = R.color.category_family;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Colors")){
                colorToUse = R.color.category_colors;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Phrases")){
                colorToUse = R.color.category_phrases;
            }

            tvTabItem.setTextColor(getResources().getColor(colorToUse));
            tab.setCustomView(v);
            vpPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            View v = tab.getCustomView();
            TextView tvTabItem = v.findViewById(R.id.tvTabItem);
            tvTabItem.setTextColor(getResources().getColor(R.color.white));
            tab.setCustomView(v);
        }

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

        }
    });

}

Is there a way to achieve the same goal in a more effective way? Thanks in advance and thanks for your time reading this!

Answer 1

You can do it in either two ways, in xml or in java code.

In XML:

Use app:tabTextColor for unselected tab color and app:tabSelectedTextColor for selected tab color

<android.support.design.widget.TabLayout
    app:tabIndicatorColor="@color/yourColor"
    app:tabTextColor="@color/yourColor"
    app:tabSelectedTextColor="@color/yourColor">

In Java Code:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {

        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            super.onTabSelected(tab);
            tabLayout.setTabTextColors(

            // Unselected Tab Text Color

                    ContextCompat.getColor(MainActivity.this, R.color.unselectedTabColor),

            // Selected Tab Text Color

                    ContextCompat.getColor(MainActivity.this, R.color.selectedTabColor)
            );

      // Selected Tab Indicator Color

            tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.yourColor));
            tabLayout.setSelectedTabIndicatorHeight(5);
        }

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

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

Answer 2

In the layout xml file add this to your TabLayout:

app:tabSelectedTextColor="your color"

Or programmatically do this:

tabLayout.setTabTextColors(int normal_color, int selected_color);

Answer 3

Add a tab select listener and then change the color there based on the position:

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            int position = tab.getPosition();
            View v = tab.getCustomView();
            //Change the color of the tab's layout here
        }

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

            int position = tab.getPosition();
            View v = tab.getCustomView();
            //Change the color of the tab's layout here
        }

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

        }
    });