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
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
but didnt get the required results.
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.
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.drawRect(0, borderSize, unscaledWidth, unscaledHeight - (borderSize * 2));
And the CSS to use it in your application:
<?xml version="1.0" encoding="utf-8"?>
@namespace s "library://ns.adobe.com/flex/spark";
Specify a different borderClass FXG class reference (see ActionBarSkin). The default graphic spark.skins.mobile160.assets.ActionBarBackground embeds the border in FXG.
Jason San Jose
Software Engineer, Flex
how can this be done? I entered the following code:
|public class Border extends ActionBarSkin|
|override protected function|
in the solidActionBarSkin file, but I'm stuck here because I don't know what function to use, there isn't any 'Border Style' function or something like it. I also tried looking at the ActionBarkSkin, but I can't find it anywhere.