How to remove or hide the toolbars' top shadow

Question

After removing the background of the toolbar, with an image mask, a shadow line still remains above the toolbar. How do we get rid of it? As you can see, by the image below, I want to use the toolbar and buttons but no background or top shadow.

const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *_img = [[UIImage alloc] init];
UIImage *_maskedImage = [UIImage imageWithCGImage:CGImageCreateWithMaskingColors(_img.CGImage, colorMask)];
[self.navigationController.toolbar setBackgroundImage:_maskedImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

Toolbar top shadow after hiding background with image mask

Don't edit your question into an answer, it doesn't make sense any more. Answering your own question is fine (you can accept your own answer, as well). — jrturton, Dec 24 '12 at 08:06
@jrturton Oh, okay thank you. I hesitated to use "Answer my own Question"; wasn't sure. `setShadowImage` property for `toolbar` evaded me because it's under `UIToolbar`; in the developer documentation. — code-blind, Dec 24 '12 at 08:15

score 15 · Answer 1 · answered Nov 10 '13 at 18:47

None of the other answers worked on iOS7, some didn't seem to work consistently on older iOS versions either. This (paraphrasing http://samplecodebank.blogspot.com/2013/06/UIToolbar-setShadowImage-forToolbarPosition-example.html) works consistently on 5.1+ for me and is concise and more performant than generating custom background images and color masks.

toolbar.backgroundColor = [UIColor clearColor];
if ([toolbar respondsToSelector:@selector(setBackgroundImage:forToolbarPosition:barMetrics:)]) {
  [toolbar setBackgroundImage:[UIImage new] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
}
if ([toolbar respondsToSelector:@selector(setShadowImage:forToolbarPosition:)]) {
  [toolbar setShadowImage:[UIImage new] forToolbarPosition:UIToolbarPositionAny];
}

score 8 · Answer 2 · answered Jan 14 '14 at 14:40

8

On iOS 7, set [toolBar setClipsToBounds:YES].

answered Jan 14 '14 at 14:40

reinaldoluckman

6,317
8
42
50

score 5 · Accepted Answer · edited Mar 26 '14 at 02:37

5

Add this line also

[toolbar setShadowImage:_maskedImage forToolbarPosition:UIToolbarPositionAny];

Two important notes:

You must also set the background image as well, otherwise this won't do anything.
This is for iOS 6+

edited Mar 26 '14 at 02:37

iwasrobbed

46,496
21
150
195

answered Dec 24 '12 at 07:50

Ankit Bhardwaj

221
2
9

Can you correct your code format, so it appears in a code sample area. Makes easier to read. – Popeye Dec 24 '12 at 11:21

score 2 · Answer 4 · answered Dec 24 '12 at 07:14

2

First Add QuartzCore/QuartzCore framework in your project and after import it this in your .m file like bellow...

#import <QuartzCore/QuartzCore.h>

and after just add this bellow code...

    yourToolBar.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);

    yourToolBar.layer.shadowOpacity =0.0f;

    yourToolBar.layer.shadowRadius = 0.0f;

hope this helpful to you...

answered Dec 24 '12 at 07:14

Paras Joshi

20,427
11
57
70

1

this has no impact on iOS7 that i can tell. – natbro Nov 10 '13 at 00:43

score 0 · Answer 5 · edited Dec 30 '13 at 00:48

0

None of the other answers worked for me in iOS 7, so here is what I did using Interface Builder:

Add the toolbar to a UIView.
Size the UIView the same as the UIToolbar.
Drag the top of the UIView down until it just covers the top of the UIToolbar.
Using the Attribute Inspector click the 'Clip Subviews'.

Doing this will clip the top of the toolbar off and thus remove the gray shadow.

edited Dec 30 '13 at 00:48

splrs

2,424
2
19
29

answered Dec 30 '13 at 00:22

PricklyApps

113
6

score -1 · Answer 6 · answered Dec 24 '12 at 07:18

-1

setBackgroundImage:_maskedImage need to remove the shadow or else call the customized shadow clear method after toolbar hide

answered Dec 24 '12 at 07:18

PonnuruKumar

9
2

How to remove or hide the toolbars' top shadow

6 Answers6