Blue button images for iPhone apps

by Roger Collins on January 14, 2010

The iPhone SDK makes it easy to add a bright blue button on the navigation bar.  It is the color that means press this when you’re done doing what you’re doing. However, if you want to add a button with the same meaning somewhere else, its a lot of work.  There is a blue button that all the demos and beginning developer books use that is provided in the sample apps, but its the wrong color of blue.  So, here’s the right color.  First, normal:

Then, pressed:

Then, here is the code to make the images stretchable and set your button images to them.  Put this in viewDidLoad method:

UIImage *buttonImageNormal = [UIImage imageNamed:@"action-normal.png"];
UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[playButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

UIImage *buttonImagePressed = [UIImage imageNamed:@"action-pressed.png"];
UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[playButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStateHighlighted];

Here’s what it looks like when you’re done.  Notice how it matches the standard switch control pretty well:

Feel free to download and use these images and code.  Hope it helps.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • Twitter

Leave a Comment

Previous post:

Next post: