Search code examples
androidandroid-fragmentstabsandroid-actionbartabbar

Black color on ActionBar TabBar


I'm pulling my hair out about a strange UI bug in my app that occurs on android 4.1.2 (real devices) only .

The bug is that the background color on an active Tab is black (see screenshot below) It should be : White background color for active(selected) Tab and a grey background for inactive unselected one .

Although in my styles.xml file I clearly set a state list drawable with a white background when the tab is active and it's working perfectly on android version 4.2.2 and above .

enter image description here

Here is my styles.xml :

<!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/MyActionBar</item>


        <item name="android:actionBarTabTextStyle">@style/TabText</item>

        <!-- This is a White background -->
        <item name="android:actionBarTabBarStyle">@style/TabBar</item>


        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>



    </style>

The customization for the tab bar in styles.xml :

<style name="TabBar" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
        <!-- This is a White background -->
        <item name="android:background">@color/white</item>
    </style>


    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs" parent="android:style/Widget.Holo.Light.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/tab_bar_background</item>
    </style>


    <style name="TabText" parent="android:style/Widget.Holo.Light.ActionBar.TabText">
        <!-- This is a WHITE tab color -->
        <item name="android:textColor">@color/selector_tab_text</item>
        <item name="android:textAllCaps">false</item>
    </style>

and here is my : tab_bar_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- UNSELECTED TAB STATE -->
    <item android:state_selected="false" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Bottom indicator color for the UNSELECTED tab state -->
            <!-- Tab background color for the SELECTED tab state -->
            <item>
                <shape>
                    <solid android:color="#d0d0d0"/>
                </shape>
            </item>

        </layer-list>
    </item>
    <!-- SELECTED TAB STATE -->
    <item android:state_selected="true" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Tab background color for the SELECTED tab state -->
            <item>
                <shape>
                    <solid android:color="@color/white"/>
                </shape>
            </item>
            <!-- Bottom indicator color for the SELECTED tab state -->
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="#309CB9" android:width="3dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

I add the tabs on my activity which extends FragmentActivity and implements TabListener like this :

//sets the tabs
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

As I mentioned this code works perfectly on android version 4.2.2 (a white background for a selected tab)

Am I missing something ?

Thank you for your time .


Solution

  • Thank you all for your help . I managed to get my tab bar to work properly by replacing my list drawable with this code (Google android copyright):

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />
    
        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />
    
        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
    
        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
    </selector>
    

    The drawable are available here (xxhdpi) https://github.com/android/platform_frameworks_base/tree/master/core/res/res/drawable-xxhdpi (Google's code and drawable)

    Back to the issue it self : It's still a mystery why the same old code works on some devices and don't on others .

    One thing to add before closing the topic : by removing this portion of code from the old list drawable it worked = White background on a selected(activated) Tab but without of course the bottom indicator color for the SELECTED tab state !

    <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                    <shape android:shape="rectangle">
                        <stroke android:color="#309CB9" android:width="3dp"/>
                    </shape>
                </item>
    

    I assumed that having two items in a the same layer-list broke something and created the faulty behavior "on some devices" pre 4.2.x