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.