SwiftUI: how to change NavigationView.toolbar background color

Question

Any idea on how to apply a specific background color to the bottom toolbar?

NavigationView {
    List {
        ....
    }
    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Button(action: { model.selectTab(tab: "ITEM1") }, label: { Text("ITEM1") })
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { model.selectTab(tab: "ITEM2") }, label: { Text("ITEM2") })
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { model.selectTab(tab: "ITEM3") }, label: { Text("ITEM3") })
        }
    }
}

@aheze unfortunately if I chain that to the toolbar, the background color doesn't change — Daniele B, Oct 29 '20 at 01:09

score 12 · Answer 1 · answered Sep 16 '22 at 09:25

12

iOS 16 Onwards

Note: use .toolbarBackground(.visible, for: .navigationBar) The preferred visibility of the background of the bar.

Detail tutorial here - https://janeshswift.com/ios/swiftui/how-to-change-navigationview-colour-in-swiftui/

struct ContentView : View {
    var body: some View {
        NavigationStack {
            Text("Dashboard")
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text("Cool Title")
                            .foregroundColor(.black)
                    }
                }
                .navigationBarTitleDisplayMode(.inline)
                .toolbarBackground(.red, for: .navigationBar)
                .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

answered Sep 16 '22 at 09:25

Jack

13,571
6
76
98

2

For .toolbar not working. – Ramis Sep 25 '22 at 19:42
Hey @Ramis what you are trying ? may be i can help with that ? – Jack Sep 26 '22 at 05:27
1

This example showcase for .navigationBar (it is top bar). But it is not working when I try to use for .toolbar (bottom bar). – Ramis Sep 26 '22 at 11:28
Hmm i guess `UITabBar.appearance().` is only way as of now. – Jack Sep 26 '22 at 12:14
With appearance not working as well. – Ramis Sep 26 '22 at 12:57
You must use `Color.red` for setting the toolbar, not just `.red` – Nicolas Zimmer Nov 24 '22 at 14:21
You must put everything inside NavigationStack {} otherwise .toolbar will be ignored. – Ezequiel Adrian Aug 06 '23 at 21:31

Arturo · Answer 2 · 2022-09-14T23:35:43.380

5

iOS 16+

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

For more info:

https://developer.apple.com/documentation/swiftui/tabview/toolbarbackground(_:for:)

edited Sep 14 '22 at 23:35

answered Sep 14 '22 at 23:27

Arturo

3,254
2
22
61

2

For .toolbar not working. – Ramis Sep 25 '22 at 19:42
Are you using iOS 16? See the documentation above @Ramis – Arturo Sep 26 '22 at 21:02
1

All of these comments are assuming the "normal" toolbars. .bottomBar doesn't seem to respond except to UIToolbar.appearance().barTintColor = UIColor.red. @Arturo, your suggestion works if you want to colour the navigation bar (the top) or the TabBar (the very bottom). But there is frustrating little control over the addition toolbar .bottomBar – Tomm P Mar 08 '23 at 14:47

score 4 · Answer 3 · answered Jan 17 '22 at 12:17

The code below doesn't work for me:

init() {
    UIToolbar.appearance().barTintColor = UIColor.red
}

This code works:

init() {
  let coloredAppearance = UINavigationBarAppearance()
  coloredAppearance.configureWithOpaqueBackground()
  coloredAppearance.backgroundColor = .systemRed
  coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
  coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
  
  UINavigationBar.appearance().standardAppearance = coloredAppearance
  UINavigationBar.appearance().compactAppearance = coloredAppearance
  UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
  
  UINavigationBar.appearance().tintColor = .white
}

Taken from Kristaps Grinbergs' blog.

this worked not the selected answer – tintin Jun 08 '22 at 11:49 — tintin, Jun 08 '22 at 11:49

score 2 · Accepted Answer · answered Oct 29 '20 at 04:20

You can do this using UIToolbar appearance. Tested with Xcode 12 / iOS 14.

struct DemoView: View {
    
    init() {
        UIToolbar.appearance().barTintColor = UIColor.red
    }
    
    var body: some View {
        NavigationView {
            List {
                Text("Item")
            }
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: { }, label: {Text("ITEM1")})
                }
                ToolbarItem(placement: .bottomBar) {
                    Button(action: { }, label: {Text("ITEM2")})
                }
                ToolbarItem(placement: .bottomBar) {
                    Button(action: { }, label: {Text("ITEM3")})
                }
            }
        }
    }
}

This is not working for me... – wristbands Nov 12 '21 at 02:11 — wristbands, Nov 12 '21 at 02:11
Copied that exact code. It does not work. – bhause Sep 17 '22 at 18:46 — bhause, Sep 17 '22 at 18:46

score 0 · Answer 5 · answered Jun 21 '23 at 17:17

Here is bit hacky solution that avoids overriding UIToolbar.appearance() in the app. It can work for both Nav and Tab bar, or only for the one you choose (see this answer for NavBar colouring only).

struct NavWithBackground: View {
    var body: some View {
        NavigationView {
            List(0..<100) {
                Text("Row \($0)")
            }
            .padding(.vertical, 1) // note top 1 padding!
            .background(.red)
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    Button(action: {}, label: { Text("ITEM1") })
                    Button(action: { }, label: { Text("ITEM2") })
                    Button(action: { }, label: { Text("ITEM3") })
                }
            }
            .navigationTitle("100 Rows")
        }
    }
}

SwiftUI: how to change NavigationView.toolbar background color

5 Answers5

Linked

Related