Tutorial: Styling the ActionBar

The ActionBar appears at the top of your application when you use ViewNavigatorApplication or TabbedViewNavigatorApplication in your project. It’s a skin part in the ViewNavigator that updates as Views are pushed and popped. Since it’s built into the default ViewNavigatorSkin, you don’t normally create it on your own in MXML. Because it’s built in, styling the ActionBar a little less obvious. So, I’d like to show you a few easy ways to customize the look of the ActionBar through CSS.

chromeColor

ActionBar supports the chromeColor style introduced with Spark in Flex 4. This example changes the ActionBar chromeColor to red for the entire 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.holrHomeView">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
 s|ActionBar
{
chromeColor: #990000;
}
</fx:Style>
</s:ViewNavigatorApplication>

titleAlign

By default, the ActionBar title is left aligned. To change the horizontal alignment of the title text, set the titleAlign style to left, center or right. 

s|ActionBar
{
  chromeColor: #990000;
  titleAlign: center;
}

defaultButtonAppearance

By default, the ActionBar uses flat-styled button skins for Buttons inside the navigationContent or actionContent of the application or view. These buttons are designed to be flush with the edges of the ActionBar.

The ActionBar has two built-in button styles that are controlled by the defaultButtonAppearance style. The second option is a beveled, iOS-styled look seen here:

s|ActionBar
{
  chromeColor: #990000;
  defaultButtonAppearance: beveled;
}
...
<s:navigationContent>
  <s:Button label="Back">
</s:navigationContent>
<s:actionContent>
  <s:Button label="Buy">
</s:actionContent>

Using defaultButtonAppearance=”beveled” is a shortcut for setting several different style values besides the Button skinClass values. These styles include padding, font sizes, and titleAlign.

Advanced CSS Selectors

Setting styles on the ActionBar will cause those styles to be inherited down to title, navigationGroup and actionGroup components. For this reason, the SDK has structured the ActionBar style rules in the Mobile theme to use advanced CSS selectors (see sdks/4.5.1/frameworks/projects/mobiletheme/defaults.css). This is done to isolate styles to specific components and skin parts. For example, you can see that the beveled button skins use a smaller font size than the ActionBar title.

Using advanced CSS selectors does have the drawback of being less obvious to override. Here’s an example of overriding the advanced CSS in the mobile theme to (1) use a normal and italic font for the title and (2) replace the arrow-styled back button in navigationContent with the same skin as buttons used in actionContent.

s|ActionBar
{
  chromeColor: #990000;
  defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay
{
    fontWeight: normal;
    fontStyle: italic;
}

s|ActionBar.beveled s|Group#navigationGroup s|Button
{
    /* use the rounded button instead of the arrow button */
    skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin");
}

Next Steps

Use these CSS examples in your mobile projects for quick and easy styling. For more control over the look and feel of the ActionBar, apply your own custom skins.

Share on Facebook

15 Responses to Tutorial: Styling the ActionBar

  1. Tom Reil says:
    May 26, 2011 at 11:01 pm

    Jason, great tutorial. I have tried everything and still could not make my action bar different.
    When I try to implement your solution I keep getting the same CSS warning message: “CSS type selectors are not supported in components: ‘spark.components.ActionBar’ referring to s|ActionBar.
    Please advise. If source code is needed please let me kno

    • Jason San Jose says:
      May 26, 2011 at 11:09 pm

      It sounds like you’re setting your CSS in the view instead of the application file. Find your ViewNavigatorApplication or TabbedViewNavigatorApplication file and put your CSS there instead.

  2. Pingback: AIR Mobile – Modifier les styles du composant ActionBar - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

  3. Pingback: Weekly Developer Journal : June 12 – June 18

  4. MGP says:
    June 21, 2011 at 8:53 pm

    Have you ever had much luck with applying a bitmap fill to the skin?
    It seems relatively tricky…(for me anyway).

    • Jason San Jose says:
      June 22, 2011 at 10:40 am

      It’s possible yes. I assume you’ve already created an ActionBar skin to do this in. You would need to create your bitmap in createChildren then size it in layoutContents. In my iOS theme post (http://blogs.adobe.com/jasonsj/2011/06/ios-theme-for-flex-mobile-projects-proof-of-concept.html) there’s a FXP with a ViewSkin that adds a background image. There’s other ways to do it with a graphics.beginBitmapFill() call


      override protected function createChildren():void
      {
      // image is below everything else in the display list
      backgroundImage = new Image();
      backgroundImage.source = assets.MyFXGClass; // FXG
      backgroundImage.fillMode = BitmapFillMode.REPEAT;
      addChild(backgroundImage);

      super.createChildren();
      }

      override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
      {
      super.layoutContents(unscaledWidth, unscaledHeight);

      setElementSize(backgroundImage, unscaledWidth, unscaledHeight);
      }

  5. MGP says:
    June 22, 2011 at 7:44 pm

    Awesome! I’ll give it a shot. Always much to learn. Your posts are excellent and very professionaly done…Thanks for the great work and advice.

  6. MGP says:
    June 23, 2011 at 5:02 pm

    Thank you again, it works great! All that was required was commenting out the initial graphics.beginGradientFill() method and substituting it with the graphics.beginBitmapFill() method coupled with using a loader etc. Thanks again.

    • Mike says:
      July 12, 2011 at 4:22 am

      Can you give a full sample of creating an action bar skin?
      i tired taking the sample from the sources at C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.1\frameworks\projects\mobiletheme\src\spark\skins\mobile
      and modified it for the above. than poined the main skin class to the following css:
      s|TabbedViewNavigator #tabBar
      {
      skinClass: ClassReference(“customSkins.TabbedViewNavigatorTabBarSkin”);
      skinClass: ClassReference(“customSkins.ActionBarSkin”);
      }
      this all resulted in an execption:
      Required skin part middleButton cannot be found
      anyone?

  7. vasu says:
    September 6, 2011 at 2:51 am

    font color not possible to change?
    I tried
    s|ActionBar{
    color:#FF0000;
    }
    but no result.

    • Jason San Jose says:
      September 6, 2011 at 8:04 am

      You need to target the titleDisplay skin part separately:

      s|ActionBar #titleDisplay {
      color: #FF0000;
      }

  8. Art says:
    September 6, 2011 at 11:21 am

    Thanks for a very helpful blog. Is there a way to turn off the arrow-styled back button on just one screen only?