Android: Change customView of tabs in tabLayout on changing tabs

Question

I am trying to change the color of the icon in my tabs of tabLayout when tabs are switched. I am using setCustomView(view) for setting the icons like this.

    View view = inflater.inflate(R.layout.layout_icon, null);
    view.findViewById(R.id.icon).setBackgroundResource(R.drawable.apple);

    TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.tab_layout);
    tabLayout.addTab(tabLayout.newTab().setCustomView(view));

When a tab is selected I want to change its icon's color, but I don't know how to do it. If I simply setCustomView(view) on the tab again inside onTabSelected two icons appear in the tab with different colors, that is the original customView is not removed. How do I remove the custom view? Or what is the way to achieve this? Can someone please help. Thanks in advance !!

can you have a look at this link http://stackoverflow.com/questions/32611885/changing-the-background-color-of-a-tab-in-tablayout-android-design-support-libr check if this is what you want :) — Francisco Melicias, Jun 27 '16 at 15:40
@FranciscoMelicias this just involves changing the background color, which is not difficult. IN my case I need to use a different icon, (of the different color) — varunkr, Jun 27 '16 at 15:42

score 14 · Answer 1 · answered Dec 28 '17 at 19:32

A word of caution to all.

I spent a lot of time on this problem, and I hope this helps someone out:

The method TabLayout.Tab.setCustomView(View) works by adding more references to custom views rather than, as the name implies, by setting a single reference to one custom view.

You would think that if you called this method twice, that the first reference would be overwritten by the second. But, instead, it will append another view to the tab just above the old one. You won't be able to see it, because the tab isn't tall enough, but it's there.

This method would be more aptly named TabLayout.Tab.addCustomView(View)

Keep this in mind when using custom views with this layout. If you end up calling the method twice for some reason, when you call tab.getCustomView().findViewById(id) you will be receiving a different reference than the one you were expecting.

Thank you. This helped me solve a problem where the tablayout customview's badge wasn't getting updated after receiving a new notification. I found out that the customview was being set multiple times — Abed Elaziz Shehadeh, Mar 13 '19 at 23:18
@AbedElazizShehadeh: Hi Abed can you please tell how do you updated badge count after receiving notification? I'm trying to do same but it is still failing. I'm getting badgecounter reference as shown getCustomView.findViewById(R.id.badgeCounter) — NitinM, Nov 20 '20 at 11:17

score 8 · Answer 2 · answered Oct 20 '16 at 10:32

Just worked this out. You need to get a reference to your ImageView within your CustomView. I then set / unset the color in OnTabSelectedListener as follows:

@Override
public void onTabSelected(TabLayout.Tab tab)
{
    int tabIconColor = ContextCompat.getColor(getContext(), R.color.colorAccent);
    ImageView imageView = (ImageView)tab.getCustomView().findViewById(R.id.tab_icon);
    imageView.getBackground().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
}

@Override
public void onTabUnselected(TabLayout.Tab tab)
{
    int tabIconColor = ContextCompat.getColor(getContext(), R.color.white_color);
    ImageView imageView = (ImageView)tab.getCustomView().findViewById(R.id.tab_icon);
    imageView.getBackground().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
}

But getCustomView() method is private how are you accessing it from outside ? — abmussani, Feb 14 '17 at 09:39
getCustomView() is public within TabLayout.java support library (25.1.1) — Simon Huckett, Feb 15 '17 at 10:09

score 2 · Answer 3 · answered Jun 27 '16 at 15:51

2

If you have two different icons with different colors you can do that.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>

answered Jun 27 '16 at 15:51

Gokhan Arik

2,626
2
24
50

where i can use this selector file – Mahesh Gawhane Dec 01 '17 at 07:23
It's been a long time since I answered this one, as far as I remember it is `tab.setIcon(R.drawable.my_selector)` – Gokhan Arik Dec 01 '17 at 18:38
i want to change tab background on tabSelect not icon – Mahesh Gawhane Dec 02 '17 at 04:33

score 1 · Answer 4 · answered Jun 20 '19 at 12:03

For setting up custom view in Tablayout =>

Note: Once if set up .setCustomView(...) then after it can not be change so you if you want change icon inside of customview you need to do following things=>

YourActvity.java code

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

    tabLayout.getTabAt(0).setCustomView(R.layout.tabtitle);
    tabLayout.getTabAt(1).setCustomView(R.layout.tabtitle_sel);
    ...
    ...

tabtitle.xml (Create inside layout/tabtitle.xml)

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/title_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/change_checked"/>
</LinearLayout>

change_checked.xml (Create inside drawable/tabtitle.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_photo_selected" android:state_selected="true" />
<item android:drawable="@drawable/ic_photo_unselected" android:state_selected="false" 
android:state_focused="false" android:state_pressed="false" />
</selector>

ic_photo_selected & ic_photo_unselected are the images which is inside drawable folder.

=>Working : Main magic is inside this file change_checked.xml Inside of this file we write code for selected state and not selected state so when tab is selected it will automatically change icon and same for not selected.

Android: Change customView of tabs in tabLayout on changing tabs

4 Answers4