Make UINavigationBar transparent

Question

How do you make a UINavigationBar transparent? Though I want its bar items to remain visible.

score 651 · Accepted Answer · edited Jun 20 '20 at 09:12

651

If anybody is wondering how to achieve this in iOS 7+, here's a solution (iOS 6 compatible too)

In Objective-C

[self.navigationBar setBackgroundImage:[UIImage new]
                         forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

In swift 3 (iOS 10)

self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true

In swift 2

self.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.translucent = true

Discussion

Setting translucent to YES on the navigation bar does the trick, due to a behavior discussed in the UINavigationBar documentation. I'll report here the relevant fragment:

If you set this property to YES on a navigation bar with an opaque custom background image, the navigation bar will apply a system opacity less than 1.0 to the image.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 23 '13 at 22:16

Gabriele Petronella

106,943
21
217
235

29

Answering my own comment here; to undo the affect try:`[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;` – Johann Burgess Jan 05 '15 at 02:10
I need only one VC to have a transparent navbar. How do I revert to the original style after exiting that VC? – Guilherme Feb 06 '15 at 19:16
2

to achieve this in Swift from within a ViewController, do it like this: `self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true` – dy_ Mar 03 '15 at 15:01
Works using appeareance as well (iOS7/8), see : https://gist.github.com/mpycio/ddbdea1adb6b86cf02f6 – Mahakala Mar 05 '15 at 14:56
If anyone is wondering, you can undo the effect in Swift the same way -- in spite of the fact the function takes `UIImage!` as an argument, sending nil works. – jab Mar 27 '15 at 18:03
Works with Appearance proxy in iOS 9 – user3099609 Feb 10 '16 at 10:31
1

Undoing the effect for me only partially works. Because after I do this, my tableviews all have headers that are too large. App-wide, which is weird. (I only want this effect for one controller that I push on the stack.) – Henning May 11 '16 at 15:58
if need a percentage how should be? – jose920405 May 17 '16 at 22:01
For me, in iOS9, and as mentioned lower down, remove 1 line (has no effect that I can see) and add another: `[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; [self.navigationController.navigationBar setBackgroundColor:[UIColor clearColor]]; //self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationBar.translucent = YES;` – ghr Oct 27 '16 at 12:41
Setting `translucent` to `NO` works for me in iOS 10.2 – Iulian Onofrei Jan 26 '17 at 14:59
@Stone Currently struggling with exactly this issue, have you been able to solve it? – Mario Aug 05 '18 at 12:17
@Mario unfortunately no. Our workaround was to make the `NavigationBar` transparent by default and work with a background image. Have a look at this: https://stackoverflow.com/a/48691715/2307466 – Stone Aug 06 '18 at 07:25
1

You'll need `navigationBar.standardAppearance.backgroundEffect = nil` too in newer iOS verisons – Sam Soffes Feb 23 '21 at 18:14

score 30 · Answer 2 · edited Aug 21 '12 at 23:00

30

In iOS5 you can do this to make the navigation bar transparent:

nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault]; 
[img release];

edited Aug 21 '12 at 23:00

Community

1
1

answered Feb 01 '12 at 15:06

Alex Stanciu

5,183
2
24
31

6

In iOS 6 you will also want to remove the navigation bar shadow, otherwise it will look strange. `[[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];` – Robert May 26 '13 at 20:59

score 23 · Answer 3 · edited Jun 01 '15 at 19:49

From IOS7 :

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

score 17 · Answer 4 · edited May 16 '22 at 16:56

17

If you build with the latest beta iOS 13.4 and Xcode 11.4, the accepted answer won't work anymore. I've found another way, maybe it's just a bug in the beta software, but I'm writing it down there, just in case

(swift 5)

import UIKit

class TransparentNavBar :UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
        self.backgroundColor = .clear
        if #available(iOS 13.0, *) {
            self.standardAppearance.backgroundColor = .clear
            self.standardAppearance.backgroundEffect = .none
            self.standardAppearance.shadowColor = .clear
        }
    }
}

edited May 16 '22 at 16:56

shim

9,289
12
69
108

answered Feb 18 '20 at 16:09

Federico Picci

1,105
10
17

Awesome! Was just searching for a fix! Works great! Thanks! – Georg Mar 26 '20 at 15:30
Thank you! Note that if you're already setting `standardAppearance` via `UIAppearance`, setting the `backgroundColor`/`backgroundEffect`/`shadowColor` as shown here may not work, because `UINavigationBarAppearance` properties do not work with `UIAppearance`. Instead, you need to make your own instance of `UINavigationBarAppearance`, set the properties as you like, then set `navigationBar.standardAppearance = myNewInstance`. – nolanw Mar 04 '21 at 21:22

score 14 · Answer 5 · edited Mar 13 '17 at 14:24

14

For anyone who wants to do this in Swift 2.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true

or Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

edited Mar 13 '17 at 14:24

Antonio

71,651
11
148
165

answered Jun 13 '14 at 06:59

gotnull

26,454
22
137
203

2

navigationController is an optional property so you need to unwrap it. Simply add self.navigationController?.navigationBar and you are good to go – Daniel Galasko Feb 06 '15 at 09:56

score 10 · Answer 6 · edited Oct 04 '12 at 21:44

10

This seems to work:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

edited Oct 04 '12 at 21:44

Titouan de Bailleul

12,920
11
66
121

answered Feb 23 '10 at 03:42

quano

18,812
25
97
108

6

It seems that in iOS 5 you must override `-drawRect:` in a subclass proper, not in a category, and then use this subclass as your navigation bar. – Yang Meyer Dec 08 '11 at 07:04

score 9 · Answer 7 · answered Nov 18 '16 at 23:57

After doing what everyone else said above, i.e.:

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... my navigation bar was still white. So I added this line:

navigationController?.navigationBar.backgroundColor = .clear

... et voila! That seemed to do the trick.

score 5 · Answer 8 · edited Feb 10 '18 at 23:40

The below code expands upon the top answer chosen for this thread, to get rid of the bottom border and set text color:

The last two coded lines of this code set transparency. I borrowed that code from this thread and it worked perfectly!
The "clipsToBounds" property was code I found which got rid of the bottom border line with OR without transparency set (so if you decide to go with a solid white/black/etc. background instead, there will still be no border line).
The "tintColor" line (2nd coded line) set my back button to a light grey

I kept barTintColor as a backup. I don't know why transparency would not work, but if it doesn't, I want my bg white as I used to have it

let navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor.lightGray
navigationBarAppearace.barTintColor = UIColor.white
navigationBarAppearace.clipsToBounds = true
navigationBarAppearace.isTranslucent = true
navigationBarAppearace.setBackgroundImage(UIImage(), for: .default)
navigationBarAppearace.shadowImage = UIImage()

score 5 · Answer 9 · answered Jun 21 '11 at 13:31

5

I know this topic is old, but if people want to know how its done without overloading the drawRect method.

This is what you need:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

answered Jun 21 '11 at 13:31

Sander

75
1
1

1

Im sorry, this isn't correct. You still have to override the drawRect method – Sander Jun 21 '11 at 13:39
Why is this wrong? It seems to be working in IOS 6 sim. It isn't working in IOS 5? navigationBar.backgroundColor seems to be undocumented. – Cristi Dec 03 '12 at 12:48

Benjamin · Answer 10 · 2021-09-10T06:20:45.063

Solution - Swift 5 - iOS 13+

According to the documentation, in your UIViewController subclass:

override func viewDidLoad()
{
    super.viewDidLoad()
    
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    //appearance.backgroundColor = UIColor.clear
    
    navigationItem.compactAppearance = appearance
    navigationItem.scrollEdgeAppearance = appearance
    navigationItem.standardAppearance = appearance
    
    //...
}

Just to be clear, this makes the UINavigationBar completely transparent. The bar button items are still visible and work properly.

What didn't work

override func viewDidLoad()
{
    super.viewDidLoad()
    
    navigationController?.navigationBar.isTranslucent = true
    navigationController?.navigationBar.isOpaque = false

    //...
}

This made me realize I didn't actually know the difference between transparent and translucent RIP.

References

https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar

https://www.lexico.com/en/definition/transparent

https://www.lexico.com/en/definition/translucent

Update 08/10/2021

Changing the navigationItem bar buttons after setting the appearance in the way I provided will reset the appearance and you'll have to do it again.

The solution availability is iOS 13+ (navigationItem.standardAppearance) — Dannie P, Sep 09 '21 at 17:11

Mark Moeykens · Answer 11 · 2017-07-22T19:11:47.967

3

C# / Xamarin Solution

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;

edited Jul 22 '17 at 19:11

answered May 13 '16 at 18:47

Mark Moeykens

15,915
6
63
62

score 3 · Answer 12 · answered Oct 22 '16 at 11:39

for Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

score 2 · Answer 13 · edited Apr 26 '14 at 06:06

2

Try the following piece of code:

self.navigationController.navigationBar.translucent = YES;

edited Apr 26 '14 at 06:06

Thomas W

13,940
4
58
76

answered Dec 15 '10 at 11:06

Russian

1,296
10
15

score 1 · Answer 14 · answered Nov 05 '15 at 07:27

Another Way That worked for me is to Subclass UINavigationBar And leave the drawRect Method empty !!

@IBDesignable class MONavigationBar: UINavigationBar {


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
    // Drawing code
}}

score 1 · Answer 15 · answered Mar 05 '19 at 12:10

In Swift 4.2

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

(in viewWillAppear), and then in viewWillDisappear, to undo it, put

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false

andrewlundy · Answer 16 · 2020-11-26T05:33:55.343

1

This worked with Swift 5.

// Clear the background image.
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

// Clear the shadow image.
navigationController?.navigationBar.shadowImage = UIImage()

// Ensure the navigation bar is translucent.
navigationController?.navigationBar.isTranslucent = true

edited Nov 26 '20 at 05:33

answered Nov 26 '20 at 05:20

andrewlundy

1,073
15
22

score 0 · Answer 17 · answered Feb 23 '10 at 03:19

0

Do you mean entirely transparent, or using the translucent-black style seen in the Photos app? The latter you can accomplish by setting its barStyle property to UIBarStyleBlackTranslucent. The former... I'm not sure about. If you want the items on it to still be visible, you might have to do some digging around in the bar's view hierarchy and remove the view containing its background.

answered Feb 23 '10 at 03:19

Noah Witherspoon

57,021
16
130
131

2

I mean the former. I tried making a category and overriding the drawRect method of UINavigationBar (invoking CGContextClearRect), but that made it completely black. The items were still visible though. – quano Feb 23 '10 at 03:33

score 0 · Answer 18 · edited Sep 26 '15 at 02:29

0

This works for Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true

edited Sep 26 '15 at 02:29

Pang

9,564
146
81
122

answered Sep 26 '15 at 02:13

Chris3643

48
7

score 0 · Answer 19 · answered Sep 27 '18 at 01:49

0

Check RRViewControllerExtension, which is dedicated on UINavigation bar appearance management.

with RRViewControllerExtension in your project, you just need to override

-(BOOL)prefersNavigationBarTransparent;

in you viewcontroller.

answered Sep 27 '18 at 01:49

Roen

116
6

Dheeraj · Answer 20 · 2022-06-14T20:27:28.567

extension UINavigationBar {
var isTransperent: Bool {
        get {
            return false // Just to satisfy property
        }
        set {
            if newValue {
                self.shadowImage = UIImage()
                self.isTranslucent = true
                self.setBackgroundImage(UIImage(), for: .default)
            } else {
                self.shadowImage = UIImage()
                self.isTranslucent = false
                self.setBackgroundImage(nil, for: .default)
            }
        }
    }
}