iOS UITabBar : Remove top shadow gradient line

Question

I implemented a custom UITabBar and I still have this gradient/shadow on top of it. I added

[self.tabBar setBackgroundImage:[UIImage imageNamed:@"navBarBottom.png"]];

which is just changing the background but keeping the shadow gradient.

What am I doing wrong ? Is there anything to specify to get rid of it ?

What I have :

top shadow

What I want :

without shadow

Thank you.

**iOS 10.X** have some changes so please follow [THIS ANSWER](http://stackoverflow.com/a/39858796/3752143). — Mitul Marsoniya, Oct 06 '16 at 09:32

score 126 · Answer 1 · edited May 23 '17 at 11:54

126

Similary in answer for this question ... if You don't want to mess with any kind of 1x1 transparent image, this work's too:

[[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]]; 
[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];

In swift:

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()

edited May 23 '17 at 11:54

Community

1
1

answered May 02 '13 at 09:28

JakubKnejzlik

6,363
3
40
41

8

Don't forget: [[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]]; – Roger Fernandez Guri Jul 28 '13 at 22:33
@Roger: I'm not sure, is it necessary if You just need to remove the shadow? – JakubKnejzlik Aug 03 '13 at 12:16
1

Yes. I had to do it to fully remove the shadow otherwise it still displaying it. – Roger Fernandez Guri Aug 03 '13 at 15:54
@RogerFernandezGuri, actually it is not still displaying shadow, but what you see is a tab bar background colour. Instead of '[[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];', you could also try setting the background colour... – Despotovic Jan 29 '14 at 13:58
If you are setting the tab bar background image to custom one, then add: '[[UITabBar appearance] setBackgroundColor:[UIColor clearColor]];'. – Despotovic Jan 29 '14 at 14:06
Upvoted this because you need to set the Background image too. The problem here is that setting the BG to an empty image makes the background transparent, at least if it's a translucent tab bar. Which might not be what you wanted. – n13 Jul 30 '15 at 12:47
Null image doesn't work in iOS 11, at least up to and including beta 6. – lewis Aug 23 '17 at 13:39
2

Worked on iOS 12. But doesn't work on iOS13 anymore! Have anyone tried? There's a new `tabBar.standardAppearance.shadowImage` but it doesn't work at all... – SoftDesigner Sep 14 '19 at 08:30
this solution and all other solutions will affect the uitabbaritem title font, it will not apply the custom font if you have one. – JAHelia Nov 28 '19 at 08:34

Brian Liang · Accepted Answer · 2013-01-17T04:00:54.447

40

Try setting a 1x1 pixel transparent shadow image for the UITabBar:

[[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"transparentShadow.png"]];

edited Jan 17 '13 at 04:00

answered Jan 17 '13 at 02:48

Brian Liang

7,734
10
57
72

I know how to deal with UITabBarItem shadow and already removed it. My concern is the UITabBar shadow (the big line on the top) that many apps succeeded to remove. – httpete Jan 17 '13 at 02:55
It worked, thanks :) (Also for people wondering transparentShadow.png is a 1x1 transparent image) – httpete Jan 17 '13 at 03:05
Thanks mate.. A lots of tries are solved by your code.. Thanks again. – Manann Sseth Jan 16 '14 at 07:19
4

Important: The value for "setShadowImage" is by default ignored, unless you also set a background image with setBackgroundImage. So you always have to set both! [From Apple docs] – n13 Jul 30 '15 at 12:44

score 17 · Answer 3 · answered Mar 31 '18 at 06:38

17

Swift 4

UITabBar.appearance().layer.borderWidth = 0.0
UITabBar.appearance().clipsToBounds = true

answered Mar 31 '18 at 06:38

Ahmadreza

6,950
5
50
69

4

Just using `UITabBar.appearance().clipsToBounds = true` has the same effect. – tobi Nov 20 '18 at 15:52

score 16 · Answer 4 · answered Oct 27 '15 at 11:19

16

Swift

Try this for your custom tab bar. It will hide horizontal shadow line.

self.tabBar.setValue(true, forKey: "_hidesShadow")

Objective C

[self.tabBar setValue:@(YES) forKeyPath:@"_hidesShadow"];

answered Oct 27 '15 at 11:19

Sourabh Sharma

8,222
5
68
78

2

You can also add this in Interface Builder in the Identity Inspector pane for the UITabBar under the section "User Defined Runtime Attributes". Hit the + to add a row and enter the _hidesShadow key and value. – Pat Niemeyer Jul 28 '16 at 05:25
5

This is accessing a private API, so could be cause for rejection and is likely to break in future versions of iOS. – Luke Rogers Feb 01 '17 at 12:06
1

I use the Swift code. It works for iOS 11 in 04,2018. – jiexishede Apr 24 '18 at 06:54

Miravzal · Answer 5 · 2019-09-24T06:30:10.137

11

This code works both iOS 13 and below

if #available(iOS 13, *) {
    let appearance = self.tabBar.standardAppearance.copy()
    appearance.backgroundImage = UIImage()
    appearance.shadowImage = UIImage()
    appearance.shadowColor = .clear
    self.tabBar.standardAppearance = appearance
} else {
    self.tabBar.backgroundImage = UIImage()
    self.tabBar.shadowImage = UIImage()
}

edited Sep 24 '19 at 06:30

answered Sep 23 '19 at 11:11

Miravzal

2,025
1
13
11

if you have custom font on the text of UITabBarItem it will get affected using your method – JAHelia Nov 28 '19 at 06:52

score 2 · Answer 6 · answered Aug 24 '13 at 15:01

Calling [[UITabBar appearance] setShadowImage:] will customise all UITabBar instances in your app.

If you want to customize just one UITTabBar, you can do this:

[self.tabBarController.navigationController.navigationBar setShadowImage:[UIImage new]];

dbv · Answer 7 · 2018-05-10T13:53:57.333

2

Here's another easy to implement answer:

[self.tabBar setValue:@(YES) forKeyPath:@"_hidesShadow"];

Worked for me.

edited May 10 '18 at 13:53

answered Jun 22 '15 at 19:00

dbv

677
5
5

4

Caveat is that this seems undocumented. Better use the - admittedly more tedious - methods above, setting shadow and background images. – n13 Jul 30 '15 at 12:45

score 2 · Answer 8 · answered May 23 '18 at 12:28

Just be setting image it will not remove the shadow line you have to set it's borderWidth to 0. here is the code

[[UITabBar appearance] setShadowImage:[UIImage new]];

[UITabBar appearance].layer.borderWidth = 0.0f;

[UITabBar appearance].clipsToBounds = true;

score 1 · Answer 9 · answered Feb 25 '16 at 11:12

1

Place this in your AppDelegate under didFinishLaunchingWithOptions:

[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];

answered Feb 25 '16 at 11:12

DocAsh59

400
1
6
17

score 1 · Answer 10 · answered Sep 08 '17 at 13:10

Try this, ** Objective-C **

//Remove shadow image by assigning nil value.
[[UITabBar appearance] setShadowImage: nil];

// or 

// Assing UIImage instance without image reference
[[UITabBar appearance] setShadowImage: [[UIImage alloc] init]];

** Swift **

//Remove shadow image by assigning nil value.
UITabBar.appearance().shadowImage = nil

// or 

// Assing UIImage instance without image reference
UITabBar.appearance().shadowImage = UIImage()

Here is apple guideline for shadowImage.

@available(iOS 6.0, *)
open var shadowImage: UIImage?

Default is nil. When non-nil, a custom shadow image to show instead of the default shadow image. For a custom shadow to be shown, a custom background image must also be set with -setBackgroundImage: (if the default background image is used, the default shadow image will be used).

score 1 · Answer 11 · answered Apr 23 '19 at 07:11

1

I have achieved the same look by following method.
1. Set the background bar tint colour to same as the main parent view background colour.
2.

this.TabBar.BarStyle = UIBarStyle.BlackOpaque;

I used it in Xamarin, Please verify the Swift syntax.

answered Apr 23 '19 at 07:11

Shanu Singh

365
3
16

score 1 · Answer 12 · answered Nov 28 '19 at 08:51

if you need to remove the shadow line on iOS 13 from a tab bar that has a custom font, then you have to apply it this way:

if #available(iOS 13.0, *) {
   let appearance = UITabBarAppearance()
   appearance.stackedLayoutAppearance.normal.titleTextAttributes = ...
   appearance.stackedLayoutAppearance.selected.titleTextAttributes = ...
   appearance.shadowColor = .clear
   tabBar.standardAppearance = appearance
 }

score 0 · Answer 13 · answered Apr 01 '16 at 14:57

In your view controller or view controllers or BasicViewController that most of the viewcontrollers inherit in the viewDidLoad just put these 2 lines:

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_bar_background"]];
[[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"transparent_shadow"]];

Be sure transparent_shadow@2x.png is an image 1x1 or 2x2 transparent and the tab_bar_background@2x.png is an image 640x100 as the bottom bar is 50px in height.

Works on iOS 9.3

score 0 · Answer 14 · answered Aug 31 '16 at 08:44

0

Try this on viewDidload.

override func viewDidLoad() {
        super.viewDidLoad()

        self.tabBar.setValue(true, forKey: "_hidesShadow")
}

It work for me

answered Aug 31 '16 at 08:44

anhtran

21
2

score -2 · Answer 15 · answered Nov 20 '13 at 17:00

-2

In iOS 7 - this works:

[self.actionToolbar setShadowImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionAny];
[self.actionToolbar setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];

Hope that helps someone.

answered Nov 20 '13 at 17:00

iOSProgrammingIsFun

1,418
1
15
32

1

it's "UITabBar" not UIToolBar. – rordulu Jan 10 '14 at 12:53

iOS UITabBar : Remove top shadow gradient line

15 Answers15

Linked

Related