Change tabs text color in TabLayout to different colors programmatically

Question

I have 7 dates tabs in my screen, when tab selected, the text is black in color; while other select-able tabs are white in color. If the date falls on another month, I want

Answer 1

Create a style in style.xml and call in xml layout like below

 <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">

        <item name="tabIndicatorColor">@color/colorAccent</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
        <item name="tabSelectedTextColor">@color/colorAccent</item>
    </style>

    <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">@dimen/title_text_size</item>
        <item name="android:textColor">@color/secondaryText</item>
        <item name="textAllCaps">false</item>
        <item name="android:textStyle">normal</item>
    </style>

Call here

<android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="@android:color/white"
                app:tabMode="scrollable"
      **style="@style/MyCustomTabLayout"**
                app:tabGravity="fill" />

Answer 2

Best practices is used material TabLayout with ViewPager2.

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.0.0'
    // ...
}

In XML attributes

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_below="@+id/layout_toolbar">
            <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@color/white"
                    app:tabBackground="@color/colorAccent"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextColor="@color/white"
                    app:tabMode="scrollable" />
            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:nestedScrollingEnabled="false" />
        </LinearLayout>

In Kotlin

//set your adapter
//view_pager.adapter =  WebViewFragmentTabAdapter(supportFragmentManager, lifecycle)
TabLayoutMediator(tab_layout, view_pager) { tab, position ->
    tab.text = AppDataInstance.navigationTab[position].name
    view_pager.setCurrentItem(tab.position, true)
}.attach()

// in case you need to set color programmatically
(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
                ContextCompat.getColor(mContext, R.color.white))

Answer 3

Try this and let me know if this works for you:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
            if (tab.getPosition() == 0) {
                tabLayout.getTabAt(0).getIcon().setAlpha(255);
                tabLayout.getTabAt(1).getIcon().setAlpha(100);
                tabLayout.getTabAt(2).getIcon().setAlpha(100);
            } else if (tab.getPosition() == 1) {
                tabLayout.getTabAt(0).getIcon().setAlpha(100);
                tabLayout.getTabAt(1).getIcon().setAlpha(255);
                tabLayout.getTabAt(2).getIcon().setAlpha(100);

            } else if (tab.getPosition() == 2) {
                tabLayout.getTabAt(0).getIcon().setAlpha(100);
                tabLayout.getTabAt(1).getIcon().setAlpha(100);
                tabLayout.getTabAt(2).getIcon().setAlpha(255);

            }
        }

@Surya Prakash Kushawah your way is better.

Answer 4

The solution based on my code above:

ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
//get view of the 6th tab - start with zero
ViewGroup vgTabSixth = (ViewGroup) vg.getChildAt(5);
//set the not-required tab color transparent ratio 20%
vgTabSixth.setAlpha((float) 0.20);

Answer 5

set tab text color this way :

tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));