Skip navigation
Currently Being Moderated

flex mobile: actionbar chrome always has a gradient look

Jun 29, 2011 11:38 AM



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




     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.



  • Currently Being Moderated
    Jul 11, 2011 10:25 PM   in reply to Charan Raj

    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.




        import mx.core.DPIClassification;




        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));






    And the CSS to use it in your application:


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

    <s:ViewNavigatorApplication xmlns:fx=""




            @namespace s "library://";

            s|ActionBar {

                skinClass: ClassReference("SolidActionBarSkin");




    Mark as:
  • Currently Being Moderated
    Aug 17, 2011 2:13 PM   in reply to Shongrunden

    Thanks for the example.

    How do I remove the bottom / top black border?


    Mark as:
  • Currently Being Moderated
    Aug 19, 2011 9:59 AM   in reply to upshotvideo

    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

    Mark as:
  • Currently Being Moderated
    May 21, 2013 8:11 AM   in reply to Jason San Jose

    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.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points