Change Tabbed View Bar Color SwiftUI - swiftui

Question

Does anyone know how to change the background colour of a tabbed view bottom bar?
I have set the accent colour which changed the colour of my icons when I select each tab bar item.
I have tried setting the background to a colour but it doesn't change the back, and tried setting background to an image just to be sure but that also doesn't do anything.
Wondering if I need to specifically access the bottom bar somehow and then set a property on that?

Answer 1

Here is a solution. You can change appearance of the UITabBar and change the TabBar.
struct TabView: View {
init() {
UITabBar.appearance().backgroundColor = UIColor.blue
}
var body: some View {
return TabbedView {
Text("This is tab 1").tag(0).tabItemLabel(Text("tab1"))
Text("This is tab 2").tag(1).tabItemLabel(Text("tab2"))
Text("This is tab 3").tag(2).tabItemLabel(Text("tab3"))
}
}
}

Answer 2

SwiftUI 1.0 - Using named colors
Combining barTintColor and isTranslucent
For some reason I wasn't getting the full color of my named color when I used just barTintColor or even backgroundColor. I had to include isTranslucent too.
Here is my named color:
Setting Just barTintColor
(As you can see, it is slightly faded)
Setting Just backgroundColor
(This darkens the bar a little bit)
Setting barTintColor & isTranslucent to False
This combination is what did it for me:
UITabBar.appearance().isTranslucent = false
UITabBar.appearance().barTintColor = UIColor(named: "Secondary")

Answer 3

In the init() add UITabBar.appearance().barTintColor = UIColor.blue
struct ContentView: View {
#State private var selection = 1
init() {
UITabBar.appearance().barTintColor = UIColor.blue
}
var body: some View {
TabView (selection:$selection){
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
.tag(1)
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}.tag(2)
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}.tag(3)
}
.accentColor(.white)
}
}

Answer 4

This one looks like a working solution based on the latest version of Swift and SwiftUI
struct TabBar: View {
init() {
UITabBar.appearance().barTintColor = UIcolor.black
var body: some View {
TabView {
HomeView().tabItem {
Image(systemName: "house.fill")
Text("Home")
}
MapView().tabItem {
Image(systemName: "mappin.circle.fill")
Text("Map")
}
}
.edgesIgnoringSafeArea(.top)
}
}
where HomeView() and MapView() are just some other views created earlier that will be displayed on tap.

Answer 5

It is important to set the colors for UITabBar before the TabView is shown. If not using a custom view with initializer, then you must make sure it is called before the TabView is loaded, for instance in the AppDelegate (when using the "UIKit App Delegate" in the project life cycle or otherwise adding it for "SwiftUI App" life cycle).
Then you can configure it with a UITabBarAppearance() object, for instance like so:
let tabBarAppeareance = UITabBarAppearance()
tabBarAppeareance.shadowColor = .gray // For line separator of the tab bar
tabBarAppeareance.backgroundColor = .black // For background color
UITabBar.appearance().standardAppearance = tabBarAppeareance

Answer 6

TabbedView has been deprecated, for now you can try:
struct AppTabbedView: View {
#State private var selection = 3
init() {
UITabBar.appearance().backgroundColor = UIColor.blue
}
var body: some View {
TabView (selection:$selection){
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
.tag(1)
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}.tag(2)
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}.tag(3)
}
.font(.headline)
}
}

Answer 7

In case if you need change background of unselected item and top line as well then you can stuck. Next is what will work for me. We will start from this one:
In first iteration I change everything except top line:
struct ContentView: View {
#ObservedObject var model: ContentViewModel
init(model: ContentViewModel) {
self.model = model
UITabBar.appearance().isTranslucent = false
UITabBar.appearance().unselectedItemTintColor = UIColor(Color.primary)
UITabBar.appearance().barTintColor = UIColor(Color("tab_background"))
}
var body: some View {
NavigationView {
TabView(selection: $model.selectedTab) {...}
}
}
}
But after that, I realize that I can't change the color of this line in the same way. So I will use #atineoSE answer. But realize that set the UITabBar.appearance().standardAppearance will totally override my previous customization. So I need to change it - here is the final code and result:
init(model: ContentViewModel) {
self.model = model
let itemAppearance = UITabBarItemAppearance()
itemAppearance.normal.iconColor = UIColor(Color.primary)
let appeareance = UITabBarAppearance()
appeareance.shadowColor = UIColor(Color("tab_separator"))
appeareance.backgroundColor = UIColor(Color("tab_background"))
appeareance.stackedLayoutAppearance = itemAppearance
appeareance.inlineLayoutAppearance = itemAppearance
appeareance.compactInlineLayoutAppearance = itemAppearance
UITabBar.appearance().standardAppearance = appeareance
}

Answer 8

Its Work for me in latest Versions
var body: some View {
TabView{
Text("Zain ahmed")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Label("Home", systemImage: "house.fill")
}
Text("Bookmark Tab")
.font(.system(size: 30, weight: .bold, design: .rounded))
.tabItem {
Label("Bookmark", systemImage: "bookmark.circle.fill")
}
}
.onAppear() {
UITabBar.appearance().backgroundColor = .lightGray
}
}

Answer 9

init() {
UITabBar.appearance().barTintColor = .white
UITabBar.appearance().backgroundColor = .white
}

Answer 10

While this is great for light mode, when you switch to dark mode, the background for the tabbar stays the color you have selected. Any way to make the bar go to black when dark mode is sl