RSS Feed

Appcelerator: Left/Right nav button background colour

Due to the workings of the iPhone SDK, allowing system buttons, which are the default nav buttons located on the navbar to have different background colours is not currently possible. For more information as to why, read the below quote:

UIBarButtonItems (using the native terminology here) are actually not buttons in that they’re not views, but represent the buttons you see. They have no view manifestation, and can exist nowhere but within a bar. They come with the various built-in system icons and three backgrounds: plain, bordered (which ALWAYS is the bar’s color), and done (which ALWAYS is the blue). As they are not views, there are no colors to set, nor is there anything to insert backgrounds into.

The entire bug reference can be found here.

For custom background colours you generally have two options. The first option is to create a background for your button with an over state. The second option which is even simpler than the former is to create a button bar with only one button inside, like so:

var navBackButt = Ti.UI.createButtonBar({
  labels:           ['Back'],
  backgroundColor:  '#ae4041',
  color:            '#ffffff'

A button bar with a single button looks identical to a single, standard system button but with your custom background colour. An example can be seen below:

The only limitation to using button bars instead of system buttons is the lack of “styles”. You are unable to set the button as a system back button, like the following image. (Notice the point on the left hand side)

To duplicate the design of the back button you would need to set a background image on the button.

Posted in Appcelerator on the 12th October 2010


Your email address will not be published. Required fields are marked *