Skip navigation
Currently Being Moderated

flex mobile: actionbar chrome always has a gradient look

Jun 29, 2011 11:38 AM

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,

 
Replies
  • 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.

     

    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>

     
    |
    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?

    Thanks

     
    |
    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