Emil Adz Emil Adz - 4 months ago 131
Android Question

TabLayout selected Tab icon is not selected on start up:

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:

enter image description here

when instead it should be like this:

enter image description here

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 some knows what can I do to fix it?

Thanks in advance.

Answer

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.

Comments