How to make a transparent navigation bar in iOS

⋅ 3 min read ⋅ iOS UINavigationBar

Table of Contents

A transparent navigation bar is quite popular among the design community. It is just a matter of time before you have to do it. We will explore different ways to do that in this article.

I will group the way to do this into two categories.

  1. Globally, where we set app-wide navigation bars transparent.
  2. Locally, we set only some instances of navigation bars transparent.

You can easily support sarunw.com by checking out this sponsor.

Sponsor sarunw.com and reach thousands of iOS developers.

Globally

To customize the appearance of all instances of navigation bars, we modify the bar properties on the appearance proxy of UINavigationBar, UINavigationBar.appearance().

There are two sets of properties that we can set to appearance proxy to achieve a transparent effect based on an iOS version that you supported.

Pre iOS 13

You need to do three things to make a navigation bar transparent.

  1. Set background image to non-nil empty image (UIImage()).
  2. Set shadow image to non-nil empty image (UIImage()).
  3. Set isTranslucent to true.
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isTranslucent = true

iOS 13 onwards

The process becomes simpler in iOS 13 with a new UINavigationBarAppearance class which is an object that keeps all appearance attributes of a navigation bar.

You only need to make transparent background configuration by call configureWithTransparentBackground() method. It is a convenient method that configures the bar appearance object with a transparent background.

let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()

UINavigationBar.appearance().standardAppearance = appearance

You can easily support sarunw.com by checking out this sponsor.

Sponsor sarunw.com and reach thousands of iOS developers.

Make an instance of navigation bar transparent

To apply a transparent navigation bar for a specific navigation bar instance, you need to repeat the process we did in the previous step but set it on navigation bar instance instead of UINavigationBar.appearance().

Pre iOS 13

You can either set it when initializing the UINavigationController instance or inside the child view controller.

Set navigation bar appearance when initialize UINavigationController.

let nav = UINavigationController(rootViewController: ViewController())
nav.navigationBar.setBackgroundImage(UIImage(), for: .default)
nav.navigationBar.shadowImage = UIImage()
nav.navigationBar.isTranslucent = true

Set navigation bar appearance inside child view controller.

override func viewDidLoad() {
super.viewDidLoad()

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

Set navigation bar appearance inside a view controller results in the same effect as setting it directly on navigation bar creation. The navigation bar will stay transparent until other view controllers change it.

iOS 13 onwards

We can set it the same way as we did in the Pre iOS 13 method, but we use UINavigationBarAppearance instead this time.

Set navigation bar appearance when initialize UINavigationController.

let nav = UINavigationController(rootViewController: ViewController())
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()

nav.navigationBar.standardAppearance = appearance

Set navigation bar appearance inside child view controller.

override func viewDidLoad() {
super.viewDidLoad()
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()

navigationController?.navigationBar.standardAppearance = appearance
}

Read more article about iOS, UINavigationBar, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
How to disable a button in Flutter

In iOS, we can control a button enabled/disabled state by setting an isEnabled property. In Flutter, you won't find such attributes. Let's learn how to do it.

Next
How to search on a website that doesn't have a search function

Not every website got a search function. If you found an interesting site and want to explore more topics within that site, you can do it with the help of a search engine of your choice.

← Home