Android选项卡背景未更改未选中

Question

I need to change the background of a tab once selected set the unselected tab backgroud color back to the old one. For some reason the background changes only if I click on another tab after IE: I press on the first tab - correct color. Press on the second tab - the first one keeps the highlighted color and the second tab is also highlighted. Press on the 3rd one - the first one is back to normal, the second one is still highlighted and the 3rd one is also highlighted.

Here is my TabLayout and one of my tabs (They are all the same design)

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#dbdbdb"
    app:tabPaddingBottom="-1dp"
    app:tabPaddingEnd="-1dp"
    app:tabPaddingStart="-1dp"
    app:tabPaddingTop="-1dp"
    app:tabBackground="@drawable/tabs_background_colors"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true" >
    android:background="@android:color/darker_gray" >
    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:icon="@drawable/reservation_w"
        android:id="@+id/tab_reservation"
        android:layout="@layout/tab_item_with_icon"
        android:layout_weight="1" />

The tab_item_with_icon

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:background="#00000000">

<ImageView android:id="@android:id/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:scaleType="fitCenter"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

and my tab listener

((TabLayout)findViewById(R.id.tab_layout)).addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
            int icon = 0;
            switch (tab.getPosition())
            {
                case 0:
                    icon = R.drawable.reservation_w;
                    break;
                case 1:
                    icon = R.drawable.offers_w;
                    break;
                case 2:
                    icon = R.drawable.folio_w;
                    break;
                case 3:
                    icon = R.drawable.location_w;
                    break;
                case 4:
                    icon = R.drawable.contact_w;
                    break;
            }
            tab.setIcon(icon);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            int icon = 0;
            switch (tab.getPosition())
            {
                case 0:
                    icon = R.drawable.reservation_g;
                    break;
                case 1:
                    icon = R.drawable.offers_g;
                    break;
                case 2:
                    icon = R.drawable.folio_g;
                    break;
                case 3:
                    icon = R.drawable.location_g;
                    break;
                case 4:
                    icon = R.drawable.contact_g;
                    break;
            }
            tab.setIcon(icon);

In addition this is my states xml for the tab

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
<item android:drawable="@color/tab_background_unselected" android:state_selected="false"/>

And here it how it looks in case I wasnt that clear with my demonstration

Thanks in advance :)

Answer 1

Apparently it looks like a bug... but setting the icon in the onTabUnselect would make it so that the background wouldnt change... not sure why and would be glad if someone can explain it.

Anyway if you got into this mess the solution is to not change the icons in onTabUnselect but only on the onTabSelect event. What I did was save the position of the unselected tab into a global int from the onTabUnselect

@Override
        public void onTabUnselected(TabLayout.Tab tab) {
            unselectedTabPosition = tab.getPosition();
        }

and then change the icons on the onTabSelect -

@Override
        public void onTabSelected(TabLayout.Tab tab) {

            changeToGrayIcon(unselectedTabPosition);

Hope this will save the time I wasted on this for someone.

Answer 2

Your first xml contains errror. Check android:background property. Run the method tab.setIcon(icon) on UI thread.

YourActivity.this.runOnUiThread(new Runnable() {
    public void run() {
        tab.setIcon(icon);
    }
});