4 Replies Latest reply on May 21, 2013 8:11 AM by Mahueles

    flex mobile: actionbar chrome always has a gradient look

    Charan Raj Adobe Employee

      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,

        • 1. Re: flex mobile: actionbar chrome always has a gradient look
          Shongrunden Adobe Employee

          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>

          • 2. Re: flex mobile: actionbar chrome always has a gradient look
            upshotvideo Level 1

            Thanks for the example.

            How do I remove the bottom / top black border?

            Thanks

            • 3. Re: flex mobile: actionbar chrome always has a gradient look
              Jason San Jose Adobe Employee

              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

              • 4. Re: flex mobile: actionbar chrome always has a gradient look
                Mahueles

                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.