Search code examples
androidactionbarsherlock

Actionbar fills transparent icon pixels with wrong background

I am using actionbar sherlock. I have an icon with transparent pixels. But when I run my app, it seems "something" is replacing these transparent pixels with the main background from the theme, not the actionbar background.

It does not matter if the main background is specified as a @color or a @drawable (9 patch) but in the latter case (which is what I actually want) there is an additional quirk in that a few pixels of the main background 9 patch appear at the right(!) hand edge of the actionbar. Go figure.

I have no idea what's going on here. Just that if I remove the background items from the main style, the actionbar looks as it should (so that seems to be the problem).

Has anyone else seen such behaviour before? Thanks for taking a look!

I'll paste my style.xml below:

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="ViewPagerIndicator">
    <attr name="vpiSubTabPageIndicatorStyle" format="reference"/>
</declare-styleable>

<style name="Theme.StandBy" parent="Theme.Sherlock.Light.DarkActionBar">

    <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    <item name="vpiSubTabPageIndicatorStyle">@style/CustomSubTabPageIndicator</item>
    <item name="android:actionBarStyle">@style/Theme.StandBy.App.ActionBar</item>
    <item name="actionBarStyle">@style/Theme.StandBy.App.ActionBar</item>

<!-- ------------------------------------------ ->
<!-- I tried both of these, but can't get transparent pixels in my icon to work --->
<!-- when I use the 9 patch (frg_background) in stead of a plain color, there -->
<!-- are extra artefacts in that some of the 9 patch pixels end up on the righthand -->
<!-- side of the action bar -->
    <!--<item name="android:background">@drawable/frg_background</item>
    <item name="background">@drawable/frg_background</item>-->
  <item name="android:background">@color/cream</item>
  <item name="background">@color/cream</item>
<!-- ------------------------------------------ ->
</style>

<style name="Theme.StandBySubTab" parent="Theme.Sherlock.Light.DarkActionBar">
    <item name="vpiTabPageIndicatorStyle">@style/CustomSubTabPageIndicator</item>
</style>

<style name="Theme.StandBy.App.ActionBar" parent="Widget.Sherlock.ActionBar">
    <!--
        Both `android:xyz` and `xyz` need to be set to support 4.x and 2.x devices.
    -->
    <item name="android:displayOptions">showHome</item>
    <item name="displayOptions">showHome</item>
    <item name="android:background">@drawable/bar</item>
    <item name="background">@drawable/bar</item>
</style>

<!-- top tab style -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:background">@drawable/tab_background</item>
    <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
    <item name="android:divider">@drawable/tab_divider</item>
    <item name="android:showDividers">middle</item>
    <item name="android:paddingLeft">4dp</item>
    <item name="android:paddingRight">4dp</item>
</style>
<style name="CustomTabPageIndicator.Text">
    <item name="android:textColor">@color/tab_text</item>
    <item name="android:textSize">10sp</item>
    <item name="android:textStyle">bold</item>
</style>

<!-- sub tab style -->
<style name="CustomSubTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:background">@drawable/sub_background</item>
    <item name="android:textAppearance">@style/CustomSubTabPageIndicator.Text</item>
    <item name="android:paddingLeft">4dp</item>
    <item name="android:paddingRight">4dp</item>
</style>
<style name="CustomSubTabPageIndicator.Text">
    <item name="android:textColor">@color/sub_text</item>
    <item name="android:textSize">10sp</item>
    <item name="android:textStyle">bold</item>
</style>

</resources>

EDIT: since the problem goes away if I do not specify background and android:background in my main style (Theme.StandBy) it occurred to me I might be asking the wrong question. My purpose in putting these items in is to specify a default background for all of my fragments (content of tabs). That works, but has the unwanted side-effects I mentioned above. Should I be doing this in another way? Thanks for any suggestions!

Solution

  • Properties that you set on the theme will be inherited by EVERY view when the view resolves its styles. In your case, every view that doesn't have an explicit background set somewhere else will render an @color/cream background. This is bound to cause the kinds of visual problems you're experiencing, as well as creating massive amounts of unnecessary overdraw.

    A much better way to apply common styling to your fragments is to simply create a style

    <style name="Fragment">
    <item name="android:background">@color/cream</item>
</style>

    and reference it from the root view of each fragment, e.g.

    <LinearLayout style="@style/Fragment">
    ...
</LinearLayout>

    This means a bit of extra typing as the reference to the style needs to go into each fragment, but there is no good way to avoid this -- Conceptually only View classes can have their own default style set by the theme (e.g. you can point the textViewStyle attribute at a style definition, and it will apply to all TextViews). However Fragments (or Activities for that matter) aren't Views, so this mechanism doesn't apply.