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 :

What I want :

Thank you.

Answer 1

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

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

Answer 2

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()

Answer 3

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"];

Answer 4

Swift 4

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

Answer 5

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()
}

Answer 6

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

Answer 7

Here's another easy to implement answer:

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

Worked for me.

Answer 8

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;

Answer 9

Place this in your AppDelegate under didFinishLaunchingWithOptions:

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

Answer 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).

Answer 11

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.

Answer 12

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
 }

Answer 13

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 [email protected] is an image 1x1 or 2x2 transparent and the [email protected] is an image 640x100 as the bottom bar is 50px in height.

Works on iOS 9.3

Answer 14

Try this on viewDidload.

override func viewDidLoad() {
        super.viewDidLoad()

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

It work for me

Answer 15

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.