TabLayout selected Tab icon is not selected on start up

Question

I'm using a TabLayout for Tabbed navigation in my app. I have a really weird issue with it, I have created 4 tabs using this code:

private int[] tabIcons = {R.drawable.navigation_timeline_icon_selector, R.drawable.navigation_feed_icon_selector,
        R.drawable.navigation_messages_icon_selector, R.drawable.navigation_notification_icon_selector};

 TabLayout tabLayout = setTabLayout();
    if (tabLayout != null) {
        for (int i = 0; i < 4; i++) {
            tabLayout.getTabAt(i).setIcon(tabIcons[i]);
        }
    }

Each of the items in tabIcon is a selector with selected and non-selected states. All icon selectors are configured as follows:

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

The problem is that when the application starts the first selected tab (index 0) does not use the selected state icon. Instead it uses the non-selected state.

To be more explanatory here is a screenshot of the issue, on first start my tab looks like this:

when instead it should be like this:

After I change a page all the icons come back to full functionality, and the selected states are selected properly.

I tried to use the TabLayout.Tab select() method but the result is the same the icon that is used is the not selected icon.

Does someone know what I can do to fix it?

Nicholas

@MsYvette what does that mean and how can it be handled? – Nicholas

@MsYvette You want to see the selector? – Nicholas

Yes it looks like your are right, I think I missing a state in my selector, testing it right now. – Nicholas

@MsYvette well the selector's changes didn't fix the problem, for some reason it's still not selected. continue looking for a solution. – Nicholas

@MsYvette selector code added. – Nicholas

Hi @EmilAdz Do we have a solution to this issue already? – Tangleberry

@Elye, well emirua's answer works in case all of you tabs are custom views. Another thing you can do (if they are not) is select a second tab and then select the first one on start up. that will result in a selected first tab but also in calling the onTabSelected if you have a OnTabSelectedListener attached to the TabLayout. – Nicholas

Answer 1

The correct answer for tab selection in TabLayout would be:

TabLayout.Tab currentTab = mTabs.getTabAt(selectedTab);
if (currentTab != null) {
    View customView = currentTab.getCustomView();
    if (customView != null) {
        customView.setSelected(true);
    }
    currentTab.select();
}

where currentTab.select() will move the indicator to the selected tab, when customView.setSelected() will make all the items in the custom view set their selected states from the selectors look selected.

Nicholas

Answer 2

Try this:

tabLayout.getTabAt(yourInitialPosition).getCustomView().setSelected(true);

Pedroza

I don't have a "getCustomView()" method, because I didn't added my tabs as custom view but as simple plain icons. So even if this works, I can't use this solution. – Nicholas

getCustomView is a public method from the TabLayout.Tab class, so you must have it and in this case it will return the drawable selector that you are applying to this tab. I don't get why you can't use it if it works. Maybe I'm missing something.. Can you elaborate please? – Pedroza

And if you can't use this solution, you can always just change the selection to a different tab and then switch back to the initial position programatically. – Pedroza

You are right, getCustomView is indeed a public method but unless you set your tab as a custom view and not a icon tab, you can't use that method. – Nicholas

@Emil So you can try tabLayout.getTabAt(0).select(); although it doesn't work if you do have a custom view. – Asserted

Perfect! I had initially tried tabLayout.getTabAt(0).select(), but that didn't work. This solution had the missing ingredient – Glowing

This is not working if I don't have a custom view for tabs! – Epigrammatist

Answer 3

I used in my tabLayout the xml selector for the icons with the following states:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/icon_ajuda_off"/>
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/icon_ajuda_on"/>
<item android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/icon_ajuda_on"/>
<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/icon_ajuda_on"/>

and in the code:

private int[] tabIcons = {R.drawable.ic_tab_sites, R.drawable.ic_tab_help,
        R.drawable.ic_tab_profile, R.drawable.ic_tab_notification, R.drawable.ic_tab_search};

if (tabLayout != null) {
    for (int i = 0; i < 5; i++) {
        tabLayout.getTabAt(i).setIcon(tabIcons[i]);
    }
}

It might help.

Pediform

Answer 4

Try selecting the tab after you've populated them.

TabLayout tabLayout = setTabLayout();
if (tabLayout != null) {
    for (int i = 0; i < 4; i++) {
        tabLayout.getTabAt(i).setIcon(tabIcons[i]);
    }
    tabLayout.getTabAt(0).select();
}

Cd

like I said: I tried to use the TabLayout.Tab select() method but the result is the same the icon that is used is the not selected icon. – Nicholas

Yes, saw it now... actually I think that first tab is also selected by default. the issue is not that the tab is not getting selected, but the fact the wrong icon is used. – Nicholas

what do you mean by this question? each time another tab is getting selected. On start up the 0 indexed tab should be selected. – Nicholas

Answer 5

here is solution, paste this code in you onCreate Activity because using tabs 0 index not triggers directly this is easy way to do

 viewPager.setCurrentItem(1);
    if (viewPager.getCurrentItem()==1)
    {
        viewPager.setCurrentItem(0);
    }

Praiseworthy

Answer 6

In my case I only wanted to add the vector drawable to the selector file by it's not working so if you want to use Vector drawable you MUST add them as separated files...

<item android:drawable="@drawable/stnkb_tab_recent_selected_true" android:state_selected="true" />
<item android:drawable="@drawable/stnkb_tab_recent_selected_false" />

Beisel