How can we change Selected Tablayout Icon and Text color in android

Question

Hi i am new for android and in my app i have to change Selected TabLayout Icon and Text colors as Blue and remaining Unselected Icon and Text colors should be white for this i wrote below code but here only changing icon color how can i change text color also

my code:-

   setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setOnTabSelectedListener(
                new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {

                    @Override
                    public void onTabSelected(TabLayout.Tab tab) {
                        super.onTabSelected(tab);
                        int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                        tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                    }

                    @Override
                    public void onTabUnselected(TabLayout.Tab tab) {
                        super.onTabUnselected(tab);
                        int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                        tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                    }

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

Screen:-

Answer 1

To change Selected Tab Icon Use Selector

Like this

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_on" android:state_selected="true"/>
    <item android:drawable="@drawable/icon_off"/> <!-- default -->
</selector>

tab.setIcon(R.drawable.yourselectorname)

Answer 2

You can do it programatically like this,

tabLayout.setTabTextColors(getResources().getColorStateList(R.color.selector));

or in XML Layout like this,

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabGravity="fill">

Answer 3

you can use this to easily change the icon that you want on Tab in Tablyout

TabViewPager = (ViewPager) findViewById(R.id.viewpager);
        SelectedTab(TabViewPager);
        TabLayout = (TabLayout) findViewById(R.id.tabs);
        TabLayout.setupWithViewPager(TabViewPager);
        setupTabIcons();

Now Set Tab Icons

   private void setupTabIcons() {
    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_icon_video_imageseloctor, 0);
    TabLayout.getTabAt(0).setCustomView(tabOne);

    TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_icon_audio_selector, 0);
    TabLayout.getTabAt(1).setCustomView(tabTwo);
}

Creat a ic_icon_video_imageseloctor File in Drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_icon_video_selected" <!-- On select state of Tab -->
android:state_selected="true"/>
<item android:drawable="@drawable/ic_icon_video"/> <!-- default -->
</selector>

At last Set Tablayout

 private void SelectedTab(ViewPager viewPager) {
    viewfragmentpag adapter = new viewfragmentpag(getSupportFragmentManager());
    adapter.AddFrag(new SelectVideoFragment(), "VIDEO");
    adapter.AddFrag(new getMP3Files_Fragment(), "Converted File");
    viewPager.setAdapter(adapter);
}

Here is your Custom TalbLayout

 <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:background="@drawable/tab_selector"
    android:gravity="center"
    android:paddingLeft="12dp"
    android:paddingTop="10dp"
    android:paddingRight="12dp"
    android:paddingBottom="10dp"
    android:textColor="@drawable/tab_text_color_selector"
    android:textSize="@dimen/whatsapp_tab_txt_size" />

Answer 4

Try to use below solution in your TabLayout

 <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabTextColor="@color/colorTabNotSelect"
        app:tabSelectedTextColor="@color/colorAccent"
        android:background="#fff"
        app:tabGravity="fill"/>

I hope it will work for you.

Answer 5

I've used TabWidget though you can give it a try and it works for me.

private FragmentTabHost tabHost;
private MyView viewHome, viewCity;

tabHost = (FragmentTabHost) findViewById(R.id.tabHost);
tabHost.setup(this, getFragmentManager(), android.R.id.tabcontent);

//ToDo: This is custom view for tabs which is selected and not selected
viewHome = new MyView(this, R.drawable.tab_home_selected, R.drawable.tab_home_unselected, "");

//ToDo: Add all the tabs here
tabHost.addTab(tabHost.newTabSpec("Search Restaurant").setIndicator(viewHome), SearchRestaurantFragment.class, null);
tabHost.addTab(tabHost.newTabSpec("My City").setIndicator(viewCity), MyCityFragment.class, null);

//ToDo: Custom view for tabs
private class MyView extends LinearLayout {
    public MyView(Context c, int drawable, int drawableselec, String label) {
        super(c);

        LayoutInflater inflater = LayoutInflater.from(DashBoardActivity.this);
        View view = inflater.inflate(R.layout.tabicon, null); // Here tabicon layout contains imageview
        final ImageView icon = (ImageView) view.findViewById(R.id.icon);

        StateListDrawable listDrawable = new StateListDrawable();
        listDrawable.addState(SELECTED_STATE_SET, this.getResources().getDrawable(drawable));
        listDrawable.addState(ENABLED_STATE_SET, this.getResources().getDrawable(drawableselec));

        icon.setImageDrawable(listDrawable);
        icon.setBackgroundColor(Color.TRANSPARENT);
        setGravity(Gravity.CENTER);

        addView(view);
    }
}

Above code will generate result:- Screenshot

1) tab_home_selected image

2) tab_home_unselected image (transparent)

Answer 6

Use attribute app:tabTextColor to set Tab normal text color and use attribute app:tabSelectedTextColor to set Tab selected text color.

Update your TabLayout XML as below:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="3dp"
    app:tabIndicatorColor="@color/blue"
    app:tabTextColor="@color/white"
    app:tabSelectedTextColor="@color/blue" />

OUTPUT:

Hope this will help~