Get rid of Actionbar bottom gradient

Question

I am trying to style the actionbar of my app (I use Actionbar Sherlock) by changing its background.

I set up a theme for my Application containing the following line to style the Actionbar:

<item name="android:actionBarStyle">@style/ActionBar</item>

I then created a style called Actionbar:

<style name="ActionBar" parent="Widget.Sherlock.ActionBar">
    <item name="titleTextStyle">@style/TitleText</item>
    <item name="android:titleTextStyle">@style/TitleText</item>
    <item name="background">@drawable/actionbar_background</item>
    <item name="android:background">@drawable/actionbar_background</item>
</style>

Finally I have an image file named actionbar_background.9.png (3x5px) in my drawable folder, which looks like this:

All of this style my actionbar just fine but there's a red to purple gradient at the bottom and I don't understand what creates that. Below are screenshots of the rendered ActionBar (the first one using the image above, the second one when I replaced the red pixels with green ones):

I tried replacing the red with green in the image file and the gradient changes accordingly (from green to purple) but I still don't get why there is a gradient.

Anyone can point me into the right direction?

Answer 1

I ended up using the following layerlist as the drawable for the actionbar background:

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/brand_orange" />
    <item android:drawable="@color/brand_purple" android:bottom="2dp" />
</layer-list>

All suggestions welcome for another approach using 9-patch.