How to make UIToolbar's background transparent?

Question

I want to make my UIToolBar have a transparent background (similar to iBooks) but I'm having no luck with setting the translucent property.

Here's my code:

UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    NSMutableArray *toolBarItems = [[NSMutableArray alloc] init];
    [toolBarItems addObject:[[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStyleBordered target:nil action:nil]];
    [toolBarItems addObject:[[UIBarButtonItem alloc] initWithTitle:@"Source" style:UIBarButtonItemStyleBordered target:nil action:nil]];
    [toolBarItems addObject:[[UIBarButtonItem alloc] initWithTitle:@"Aa" style:UIBarButtonItemStyleBordered target:nil action:nil]];
    [toolBarItems addObject:[[UIBarButtonItem alloc] initWithTitle:@"Rabbit" style:UIBarButtonItemStyleBordered target:nil action:nil]];
    toolBar.items = toolBarItems;
    toolBar.translucent = YES;
    [self.view addSubview:toolBar];

It still comes out like this:

enter image description here

I believe you will need to set a transparent background image in order to do this. Just create a 1x1 pixel transparent png. — MTurner, Apr 26 '13 at 18:48
@doug Smithh as uitoolbar is a subclass of uiview you can use it's layer property to make it transparent by changing the value of alpha — vignesh kumar, Apr 26 '13 at 19:12
Have a look at: http://stackoverflow.com/questions/2468831/couldnt-uitoolbar-be-transparent#answer-3253738 — Shad, Apr 26 '13 at 19:30

score 23 · Accepted Answer · answered Apr 27 '13 at 03:47

23

If you want toolbar as Transparent :

[toolBar setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

and if you want toolbar as Translucent :

[toolBar setBarStyle:UIBarStyleBlack];
toolBar.translucent = YES;

Hope it helps you.

answered Apr 27 '13 at 03:47

Nishant Tyagi

9,893
3
40
61

Could you explain the method you used for transparent? – Doug Smith Apr 27 '13 at 18:13
1

The Transparent method still show a thin bar at the top of the toolbar border, how to get rid of that? – Malloc Aug 07 '13 at 10:04
1

Nice elegant solution for iOS 7 – karlbecker_com Dec 07 '13 at 20:10
It seems that in iOS 7 you have to have all three lines of code in order to get transparency. If I set translucent = NO, there seems to be no way to get transparency in the toolbar at all – MusiGenesis Feb 28 '14 at 16:43
2

@Malloc: [toolbar setShadowImage:[UIImage new]forToolbarPosition:UIToolbarPositionAny]; – Etienne678 Oct 20 '14 at 21:43
Thanks, good solution! Trannslucent in storyboard en the first line in code fixed it. – Flappy Feb 08 '15 at 19:30

score 2 · Answer 2 · answered Apr 26 '13 at 20:53

One option is to subclass UIToolbar and override the draw method, the buttons will continue to draw themselves as normal:

@interface TransparentToolbar : UIToolbar 
{
}

@implementation TransparentToolbar

// drawRect stub, toolbar items will still draw themselves
- (void)drawRect:(CGRect)rect
{
    return;
}

@end

How to make UIToolbar's background transparent?

2 Answers2