How to change the bottom toolbar background on iOS 16 with SwiftUI?

Question

Since iOS 16, we can customize the background of a navigationBar easily with:

.toolbarBackground(barBackgroundGradient, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)

It's working well.

However, I can't make it working for a bottom toolbar:

.toolbarBackground(barBackgroundGradient, for: .bottomBar)
.toolbarBackground(.visible, for: .bottomBar)

It's compiling but nothing changes on the app.

Looking at developer documentation, it should work...

I tried also that:

.toolbarBackground(barBackgroundGradient, for: .navigationBar, .bottomBar)

It doesn't change anything.

Any idea ?

Hi, may I ask, did you eventually find a solution to this? – Luïs May 08 '23 at 05:45 — Luïs, May 08 '23 at 05:45
I'm having the same problem. I think it has to be a bug. – horseshoe7 Jun 12 '23 at 11:39 — horseshoe7, Jun 12 '23 at 11:39

score 0 · Answer 1 · answered May 22 '23 at 06:48

After some searching for an answer to a similar problem, my solution was to create an UIToolbar extension like this:

extension UIToolbar {
    static func changeAppearance(clear: Bool) {
        let appearance = UIToolbarAppearance()
        
        if clear {
            appearance.configureWithOpaqueBackground()
        } else {
            appearance.configureWithDefaultBackground()
        }

        // customize appearance for your needs here
        appearance.shadowColor = .clear
        appearance.backgroundColor = .clear
        appearance.backgroundImage = UIImage(named: "imageName")
        
        UIToolbar.appearance().standardAppearance = appearance
        UIToolbar.appearance().compactAppearance = appearance
        UIToolbar.appearance().scrollEdgeAppearance = appearance
    }
}

So, I think, in your case it's possible to create your barBackgroundGradient with CAGradientLayer first, then turn it to UIImage and use it in appearance.backgroundImage.

After all that call changeAppearance inside the initializer of your View:

init() {
    UIToolbar.changeAppearance(clear: true)
}

Probably, not the most elegant way, especially concerning the gradient part, so maybe you will find some other solution before Apple will fix this, as it seems to be a bug.

How to change the bottom toolbar background on iOS 16 with SwiftUI?

1 Answers1