May 1, 2013

Customizing UIToolbar

1. Changing background of UIToolbar

a) In case you just need to change background color, use tintColor property, for example:

toolbar.tintColor = [UIColor redColor];

b) In case your app runs iOS 5 and up only, use setBackgroundImage:forToolbarPosition:barMetrics: method, for example:

[toolbar setBackgroundImage:[UIImage imageNamed:@"toolbar.png"] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

c) In case you do need older iOS versions compatibility, you need to subclass UIToolbar and combine it with solution (b) using respondsToSelector: method. Basically you need to use setBackgroundImage:forState:barMetrics: method for iOS 5 and up, and override drawRect: method for older iOS versions:


#import <UIKit/UIKit.h>

@interface CustomToolbar : UIToolbar



#import "CustomToolbar.h"

@implementation CustomToolbar

- (id)initWithFrame:(CGRect)frame
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    return self;

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
    UIImage *image = [UIImage imageNamed: @"toolbar.png"];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];


Depending on your background picture selection, toolbar buttons might not look good. Here's and example:

The easiest fix would be to combine custom background with tintColor property (in this case it would be dark blue color):

toolbar.tintColor = [UIColor colorWithRed:0.0 green:0.11 blue:0.15 alpha:1.0];

Looks much better now:

If this is not enough, you might consider adding custom buttons to UIToolbar:

2. Adding custom buttons to UIToolbar

Create UIButton using any image that you want, and then create UIBarButtonItem using initWithCustomView: method. In case you want to have white glow when user touches the button similar to system bar button items, set showsTouchWhenHighlighted property to YES.

Here's some sample code:

UIButton *EmailBtn = [[UIButton alloc] initWithFrame:CGRectMake(0.0, 0.0, 44.0, 44.0)];
[EmailBtn setBackgroundImage:[UIImage imageNamed:@"email.png"] forState:UIControlStateNormal];
EmailBtn.showsTouchWhenHighlighted = YES;

UIBarButtonItem *EmailBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:EmailBtn];
NSArray *buttons = [NSArray arrayWithObjects: EmailBarButtonItem, nil];
[toolbar setItems: buttons animated:NO];

And here's the final look:


Using the combination of custom UIToolbar background and custom bar button items gives you great possibilities for creating your own unique user experience. Enjoy!


  1. Thank you for this great tutorial!!

    One question: once the user rotates the device, how do you make sure the customtoolbar stays at bottom in both portrait and landscape?

    1. In that case you should use Autolayout.
      See Apple's guide for it: