how to change tablayout selected text color in custom tablayout

Question

i have viewpager that have 4 tab which implement it with tablayout. because i wanted to change the font to custom font i used a custom tab layout. now the problem is that the selected tab text color wouldn't change with tabSelectedTextColor.

this is my java code:

package com.example.noavaran.drugstore.Activity;

import android.content.Context;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.Typeface;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.AppCompatTextView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.noavaran.drugstore.Fragment.AddressFragment;
import com.example.noavaran.drugstore.Fragment.IssueFragment;
import com.example.noavaran.drugstore.Fragment.MenuFragment;
import com.example.noavaran.drugstore.Fragment.SearchFragment;
import com.example.noavaran.drugstore.Helper.CustomViewPager;
import com.example.noavaran.drugstore.R;

import java.util.ArrayList;
import java.util.List;

import layout.fragment_approve;
import uk.co.chrisjenx.calligraphy.CalligraphyContextWrapper;
import uk.co.chrisjenx.calligraphy.CalligraphyUtils;

public class MainPageActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    public Context context;
    public Typeface tf;
    public static boolean a=false;
    private CustomViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.menu,
            R.drawable.address_icon,
            R.drawable.search_icon,
            R.drawable.issue_icon
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_page);
         tf = Typeface.createFromAsset(getAssets(), "IRANSans_Bold.ttf");

        tabCustomization();
        /*changeTabsFont();*/
        setupTabIcons();
    }

    private void tabCustomization() {
        viewPager = (CustomViewPager) findViewById(R.id.viewPager);
        viewPager.setPagingEnabled(false);

        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);

        tabLayout.setupWithViewPager(viewPager);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());


        adapter.addFragment(new MenuFragment(), "menu");

        adapter.addFragment(new AddressFragment(), "Address");
        adapter.addFragment(new SearchFragment(), "Searcg");
        adapter.addFragment(new IssueFragment(), "Issue");

        viewPager.setAdapter(adapter);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);

            tab.setCustomView(adapter.getTabView(tabLayout,i));
        }


        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        Log.i("TabChild",String.valueOf(tabsCount));


// Iterate over all tabs and set the custom view

    }
    public void setupViewPager(ViewPager viewPager) {

    }
    private void setupTabIcons() {

        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);


        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){


            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);


            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
            }

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

            }
        });
    }


    class ViewPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }


        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }
        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }
        public View getTabView(TabLayout tabLayout,int position) {
            // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView

            View view = LayoutInflater.from(getApplicationContext())
                    .inflate(R.layout.custom_tab, tabLayout, false);
            TextView textView= (TextView) view.findViewById(R.id.tabText);

            textView.setText(getPageTitle(position));
            textView.setTypeface(tf);

            ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
            imageView .setImageResource(tabIcons[position]);

            return view;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }

    }

    //Caligraphy Library
    @Override
    protected void attachBaseContext(Context newBase) {
        super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
    }
}

my custom layout:

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5px"
        android:id="@+id/imageView" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="New Text"
        android:textColor="@android:color/white"
        android:gravity="center"

        android:id="@+id/tabText" />
</LinearLayout>

and this is my tablayout tag:

   <android.support.design.widget.TabLayout
        android:layout_weight="4"
        android:id="@+id/tabs"
        android:layout_gravity="right"
        app:tabGravity="fill"
        fontPath="@string/fontsIran"
        app:tabTextAppearance="@drawable/selected_text"
        android:layoutDirection="rtl"
        app:tabBackground="@drawable/tabformat"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@color/color_tab_gray"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_main"
        />

I just did like below base on what javacoder said in this post comment but i don't know why the prev text would remove after select another tab

@Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
                TextView txt=(TextView)findViewById(R.id.tabText);
                txt.setTextColor(Color.GRAY);
                tab.setCustomView(txt);

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
                TextView txt=(TextView)findViewById(R.id.tabText);
                txt.setTextColor(Color.YELLOW);
                tab.setCustomView(txt);
            }

Privatdocent

did you try this answer https://mcmap.net/q/649207/-how-to-use-selectors-to-change-icons-with-the-new-tablayout ? – Aquileia

@Javacoder I tried to do it with tab.getCustomView() in onTabSelected event but there wasn't any method or property to do that. – Privatdocent

@Javacoder how to do that with tab.SetCustomView – Privatdocent

did you get a solution for this. – Disappointment

@NabeelK yes i used a custom adapter that extend ViewPagerAdapter and fixed well – Privatdocent

can you post the solution please ? – Disappointment

Answer 1

Here is my way to change tablayout which is on select.

Here is you Adapter

 class ViewPagerAdapter extends FragmentPagerAdapter {
   ...
   // I add two func here.
   public void SetOnSelectView(TabLayout tabLayout,int position)
   {
    TabLayout.Tab tab = tabLayout.getTabAt(position);
    View selected = tab.getCustomView();
    TextView iv_text = (TextView) selected.findViewById(R.id.tabText);
    iv_text.setTextColor(mContext.getResources().getColor(R.color.white));
   }

   public void SetUnSelectView(TabLayout tabLayout,int position)
   {
    TabLayout.Tab tab = tabLayout.getTabAt(position);
    View selected = tab.getCustomView();
    TextView iv_text = (TextView) selected.findViewById(R.id.tabText);
    iv_text.setTextColor(mContext.getResources().getColor(R.color.textblack));
   }
   ...
 }

In Activity

 //Add this
 tabLayout.addOnTabSelectedListener(OnTabSelectedListener);

And Here is OnTabSelectedListener

 private TabLayout.OnTabSelectedListener OnTabSelectedListener = new TabLayout.OnTabSelectedListener(){
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int c = tab.getPosition();
        yourAdapter.SetOnSelectView(tabLayout,c);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        int c = tab.getPosition();
        yourAdapter.SetUnSelectView(tabLayout,c);
    }

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

    }
};

Sclerous

This worked but with a small bug. fixed it by adding yourAdapter.SetOnSelectView(tabLayout,0); in onCreate(). thanks – Disappointment

Perefect answer to find tab custom views and changing their color, i used this code in main activity associated with viewpager and tabs, not in adapter, and it also works well :) – Sheatfish

You just need a selector for this !!! https://mcmap.net/q/1624988/-selected-custom-tab-text-color-in-tablayout – Riches

Answer 2

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:layout_gravity="bottom"
        android:background="@android:color/background_dark"
        app:tabTextColor="@color/text_tab_unselected"
        app:tabSelectedTextColor="@color/text_tab_selected"
        app:tabTextAppearance="@style/TextAppearance.Widget.TabWidget"/>

style

<style name="TextAppearance.Widget.TabWidget" parent="android:TextAppearance.Medium">
        <item name="android:textColor">@drawable/tab_text_color</item>
        <item name="android:textSize">10dp</item>
    </style>

Lenette