How to make completely transparent navigation bar in iOS 7

Question

I want the UINavigationBar in my app to be completely transparent and flush with the viewcontroller directly under it. However, the only code I could find makes it translucent but not transparent. I know this can be done in iOS 7 because it is used in the notes app. My question is, what is the code they used to do it?

score 296 · Accepted Answer · edited May 23 '17 at 12:34

296

From this answer

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

Also, as suggested by Josh in the comments, to put the bar back to default:

[self.navigationController.navigationBar setBackgroundImage:nil
                     forBarMetrics:UIBarMetricsDefault];

edited May 23 '17 at 12:34

Community

1
1

answered Oct 11 '13 at 16:41

Alan

4,315
3
20
25

1

When I do it (in a UIViewController), I have to change the code to say `self.navigationController.navigationBar` and all it does is change the bar to black. – cory ginsberg Oct 15 '13 at 20:12
That code should be fine. It may just be the background colour, try adding self.navigationController.view.backgroundColor = [UIColor clearColor]; – Alan Oct 16 '13 at 12:18
Thanks! Worked perfectly for me! – cory ginsberg Oct 16 '13 at 19:54
6

Also make sure you dont have `self.edgesForExtendedLayout = UIRectEdgeNone;` – daihovey Dec 13 '13 at 05:16
26

Is there a way to reverse this? – Zorayr Jan 05 '14 at 04:55
12

@Zorayr [self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; will put the bar back to default. – Josh Mar 04 '14 at 09:38
And if you need to change the color of the text once you've made your nav bar transparent, add `self.navigationController.navigationBar.tintColor = [UIColor whiteColor];` – jeremytripp Mar 12 '14 at 16:29
Works also on iOS 6.1 – Uygar Y Mar 19 '14 at 13:50
2

This causes the navigationBar to show a black image for a second while navigation back it to. Is there a way to solve that? – Robert J. Clegg Apr 25 '14 at 13:23
7

Is there any way to toggle navigation bar's transparency animated using this method? – JYC May 01 '14 at 07:58
3

I implement this on scrollViewDidScroll and there's a jump. How to fix? – onmyway133 Oct 12 '14 at 16:35
Thanks Shahid, I have edited the answer to include reversing the effect. – Alan Dec 22 '14 at 11:13
I used the accepted answer, the nav bar became transparent but the page scroll causes a jump on uipagecontroller, any suggestions on how that can be fixed? – Jillian May 04 '16 at 18:25
Why my navigation color changed to black after this code applies? :( – Lal Krishna Jun 22 '18 at 06:53

vichhai · Answer 2 · 2017-10-16T08:02:46.897

For Swift3 and Swift4

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

For Swift2.2

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

For Objective-C

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

Thanks this is an easy way to set the navigation bar to totally transparent — Hong Zhou, Aug 16 '16 at 12:54

Zorayr · Answer 3 · 2015-04-25T22:45:50.943

Self contained solution as an Objective-C Category:

UINavigationController+TransparentNavigationController.h

@interface UINavigationController (TransparentNavigationController)
- (void)presentTransparentNavigationBar;
- (void)hideTransparentNavigationBar;
@end

UINavigationController+TransparentNavigationController.m

#import "UINavigationController+TransparentNavigationController.h"

@implementation UINavigationController (TransparentNavigationController)

- (void)presentTransparentNavigationBar
{
  [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
  [self.navigationBar setTranslucent:YES];
  [self.navigationBar setShadowImage:[UIImage new]];
  [self setNavigationBarHidden:NO animated:YES];
}

- (void)hideTransparentNavigationBar
{
  [self setNavigationBarHidden:YES animated:NO];
  [self.navigationBar setBackgroundImage:[[UINavigationBar appearance] backgroundImageForBarMetrics:UIBarMetricsDefault] forBarMetrics:UIBarMetricsDefault];
  [self.navigationBar setTranslucent:[[UINavigationBar appearance] isTranslucent]];
  [self.navigationBar setShadowImage:[[UINavigationBar appearance] shadowImage]];
}

@end

Now, you can import the category in your UIViewController and call the methods on your navigation controller - for example:

#import "UINavigationController+TransparentNavigationController.h"

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
  [self.navigationController presentTransparentNavigationBar];
}

- (void)viewWillDisappear:(BOOL)animated
{
  [super viewWillDisappear:animated];
  [self.navigationController hideTransparentNavigationBar];
}

And a similar solution in Swift:

import Foundation
import UIKit

extension UINavigationController {

  public func presentTransparentNavigationBar() {
    navigationBar.setBackgroundImage(UIImage(), forBarMetrics:UIBarMetrics.Default)
    navigationBar.translucent = true
    navigationBar.shadowImage = UIImage()
    setNavigationBarHidden(false, animated:true)
  }

  public func hideTransparentNavigationBar() {
    setNavigationBarHidden(true, animated:false)
    navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImageForBarMetrics(UIBarMetrics.Default), forBarMetrics:UIBarMetrics.Default)
    navigationBar.translucent = UINavigationBar.appearance().translucent
    navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
  }
}

How can i show it again (for example if ill want to make it transparent only in 1 view in an NavigationController?) - can i reset it to my default values? — derdida, Aug 07 '15 at 13:42
Calling present/hide methods in viewWillAppear/disappear cause a bad transition animation between the two differents navigation bar! You can see it very well by doing the swipe gesture (from left to right) in the pushedViewController — andreacipriani, Sep 09 '15 at 14:07
Try calling it in `viewDidHide` of the parent view controller. — Zorayr, Sep 09 '15 at 16:51
Black background is shown on iOS 11 when using LargeTitle when hiding transparent navbar — Vrutin Rathod, Oct 12 '17 at 17:01

Damien Romito · Answer 4 · 2015-06-05T14:34:16.353

Alan forgot one line

self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

So I have:

[self.navigationController.navigationBar setTranslucent:YES];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

score 5 · Answer 5 · answered Feb 05 '17 at 01:43

@Zorayr's great answer revised to Swift 3 :

import Foundation
import UIKit

extension UINavigationController {

    public func presentTransparentNavigationBar() {
        navigationBar.setBackgroundImage(UIImage(), for:.default)
        navigationBar.isTranslucent = true
        navigationBar.shadowImage = UIImage()
        setNavigationBarHidden(false, animated:true)
    }

    public func hideTransparentNavigationBar() {
        setNavigationBarHidden(true, animated:false)
        navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImage(for: UIBarMetrics.default), for:.default)
        navigationBar.isTranslucent = UINavigationBar.appearance().isTranslucent
        navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
    }
}

score 3 · Answer 6 · answered Oct 09 '18 at 17:53

Swift 4.2 and iOS 12

It turns out all you really need is the code below. It works perfectly when you put it into viewDidLoad().

// removes line at bottom of navigation bar
navigationController?.navigationBar.shadowImage = UIImage()

// makes navigation bar completely transparent
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.isTranslucent = true

score -3 · Answer 7 · answered Sep 23 '15 at 14:49

-3

Use UINavigationBar+Addition pod, then simply call:

UINavigationBar *navigationBar = self.navigationController.navigationBar;
[navigationBar makeTransparent];

answered Sep 23 '15 at 14:49

samwize

23,611
14
136
181

score -4 · Answer 8 · answered Apr 05 '16 at 08:17

-4

[(UIView*)[self.navigationController.navigationBar.subviews objectAtIndex:0] setAlpha:0.0f];

That one line seemed to work perfectly for me

answered Apr 05 '16 at 08:17

user5679976

1

How to make completely transparent navigation bar in iOS 7

8 Answers8

Linked