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:

CustomToolbar.h:

#import <UIKit/UIKit.h>

@interface CustomToolbar : UIToolbar

@end

CustomToolbar.m:

#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)];

}

@end

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:

Conclusion

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