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?

Answer 1

Try this:

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

Answer 2

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.

Answer 3

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.

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();
}

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);
    }

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" />