Adding UIToolbar with two UIBarButtonItem to UINavigationBar: bad UIToolbar and what about the iPhone 4


I'm following the second tip from here. In this tip two UIBarButtonItems are put together in a UIToolbar. Finally, the UIToolbar is added to the UINavigationBar. Now to my problems:

1) A white line is on top of the UIToolbar. If I increase the size of the UIToolbar, the gradient is wrong. I'm using the following size for the UIToolbar:

    UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 90, 44.01)];

How can I get rid of the white line? See here:

The problem is that there is a white instead of a grey line. If it would be grey, everything would be perfect.

2) What about the difference of the display size of iPhone 3 and iPhone 4? Do I have to check which iPhone is used and then double the size?


The buttons are created like in the following example I took from the above mentioned website:

// create a toolbar to have two buttons in the right
UIToolbar* tools = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 133, 44.01)];

// create the array to hold the buttons, which then gets added to the toolbar
NSMutableArray* buttons = [[NSMutableArray alloc] initWithCapacity:3];

// create a standard "add" button
UIBarButtonItem* bi = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:NULL]; = UIBarButtonItemStyleBordered;
[buttons addObject:bi];
[bi release];

// create a spacer
bi = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[buttons addObject:bi];
[bi release];

// create a standard "refresh" button
bi = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh:)]; = UIBarButtonItemStyleBordered;
[buttons addObject:bi];
[bi release];

// stick the buttons in the toolbar
[tools setItems:buttons animated:NO];

[buttons release];

// and put the toolbar in the nav bar
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:tools];
[tools release];

@ tc.:

I tried to subclass UIToolbar.

// MyToolbar.h

#import <Foundation/Foundation.h>

@interface MyToolbar : UIToolbar {



// MyToolbar.m

#import "MyToolbar.h"

@implementation MyToolbar

- (void)drawRect:(CGRect)rect {
    // do nothing

- (id)initWithFrame:(CGRect)aRect {
    if ((self = [super initWithFrame:aRect])) {
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];
        self.clearsContextBeforeDrawing = YES;
    return self;


There's no guarantee that UIToolbar draws seamlessly inside a UINavigationBar; this might be responsible for the white line you're seeing.

You might be able to subclass UIToolbar so that it doesn't draw (i.e. override -drawRect: to not do anything).