Flex mobile: actionbar chrome always has a gradient look

Question

Hi,
I have a mobile app based on ViewNavigatorApplication. I want the action bar to have a single flattened color.
I have following declaration in the app main mxml file
s|ActionBar
     chromeColor: #000000;
In spite of this, the app’s action bar always has a gradient look. Am I missing anything here ?
also, i tried setting the following values too
backgroundAlpha: 0;
contentBackgroundAlpha: 0;
accentColor: #000000;
but didnt get the required results.
Thanks,

Answer 1

The gradient is created by the skin based on the chrome color.  You will need to create a custom skin to not draw a gradient.
Here is an example custom skin that extends ActionBarSkin to accomplish this.
SolidActionBarSkin.as:
package
    import mx.core.DPIClassification;
    import spark.skins.mobile.ActionBarSkin;
    public class SolidActionBarSkin extends ActionBarSkin
        override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
            var chromeColor:uint = getStyle("chromeColor");
            var backgroundAlphaValue:Number = getStyle("backgroundAlpha");
            // border size is twice as big on 320
            var borderSize:int = 1;
            if (applicationDPI == DPIClassification.DPI_320)
                borderSize = 2;
            graphics.beginFill(chromeColor, backgroundAlphaValue);
            graphics.drawRect(0, borderSize, unscaledWidth, unscaledHeight - (borderSize * 2));
            graphics.endFill();
And the CSS to use it in your application:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            firstView="views.ReproMHomeView">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|ActionBar {
            skinClass: ClassReference("SolidActionBarSkin");
    </fx:Style>
</s:ViewNavigatorApplication>