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 .
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 .
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