How to Skin AIR Mobile ActionBar

It took me a bit to figure out how to skin the ActionBar in a mobile AIR application so here a short tutorial. There are also two small bugs when you want to skin the ActionBar but there are decent workarounds for now.

To apply a custom skin to the ActionBar you first have to define a skin for the MobileApplication itself.

In the ApplicationSkin.mxml you have to define a ViewNavigator component with the id navigagor:

The ViewNavigatorSkin.mxml contains the push and pop transition, the ActionBar component and the content group.
Due to a small bug in the SlideViewTransition.as you have to set the direction to right on creationComplete:

Finally we can create the ActionBarSkin. There is another small bug so for now you have to define an empty Group at the 1st position.

So right now you have to create 4 different skins to change the dimensions and look of the ActionBar. From an architectural standpoint this looks very clean but having to create 4 skins to just change the height is kind of overkill.
MobileApplication should expose a style to define the dimensions of the ActionBar and should support to set the actionBarSkin right away.

You can download the example project here. The example uses compile-time FXG for the ActionBar background. More on that in a later post.

6 comments to How to Skin AIR Mobile ActionBar

  • While not a bad writeup, and completely technically correct, there’s one important thing to consider: Mobile skins are pure as3 (most are anyway, all of them should be by production release).

    But also because of this, things are potentially simplified.
    For example, instead of extending Skin for your ApplicationSkin, you can merely extend the MobileApplicationSkin, and override createChildren(), and assign the skinClass style (setStyle(‘skinClass’, ActionBarSkin)) that way. This of course assumes you want to merely change the ViewNavigator’s skin…

    I’m actually in the midst of writing a blog post about this as well, approaching it from the AS3 standpoint, but have been bombarded with so many points of interest I’ve put it on hold.

    You can see how I’ve changed my skins to allow toggling and dock positioning: http://www.youtube.com/watch?v=FrupuSKTRR4

  • Thanks for the feedback! While you could do skins in as3 I would think you can’t say that this is mandatory for production release.
    The skinning approach shown in my post works fine and besides cell phones there are also tablets with better performance.
    At the end also MXML gets converted to ActionScript and I wonder if there is a significant performance impact using MXML skins.

  • Quyen

    Thanks the post! The actionBarVisible doesn’t work well.
    I put a button in ActionBarSkinExampleHome of your code to test:

    It’s invisible at the first click, and not visible at next clicks.

  • Quyen

    Sorry, I posted the code but it’s not there
    s:Button label=”ABC” x=”10″ y=”50″ height=”50″ click=”{actionBarVisible = !actionBarVisible}”

  • actionBarVisible is not part of this post. this could be a bug in the sdk though and I would recommend to ask in an Adobe forum.

  • Osh Evans

    You can also now just use this:

    s|ActionBar
    {
    skinClass: ClassReference(“skins.ActionBarSkin”);
    }

    So that you don’t have to create all skins in the chain.