CODEWITHSUNDEEP
swiftui
AngryDuck
AngryDuck

Reputation: 4607

Change Tabbed View Bar Color SwiftUI

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?

Upvotes: 40

Views: 52797

Answers (11)

Roman Shelkford
Roman Shelkford

Reputation: 1044

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.

Upvotes: 3

Christopher
Christopher

Reputation: 193

April 2024
To set a custom background color and not have the above changes occur this is what worked for me:

let myColor: Color = Color("my-color")

In the view with the TabView

 init() {
    let tabBarAppearance = UITabBarAppearance()
    tabBarAppearance.backgroundColor = UIColor(myColor)
    tabBarAppearance.configureWithTransparentBackground()
    UITabBar.appearance().isTranslucent = false
    UITabBar.appearance().backgroundColor = UIColor(myColor)
    UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    UITabBar.appearance().standardAppearance = tabBarAppearance
}

Upvotes: 4

Yarm
Yarm

Reputation: 1328

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)
    }
}

enter image description here

Upvotes: 18

Zain Ahmed
Zain Ahmed

Reputation: 371

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
    }
   

}

Upvotes: 11

Balwinder Singh Sohi
Balwinder Singh Sohi

Reputation: 69

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

Upvotes: 4

WINSergey
WINSergey

Reputation: 2005

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: origin 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) {...}
        }
    }
}

result-1 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
}

result

Upvotes: 4

atineoSE
atineoSE

Reputation: 4107

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

Upvotes: 3

James
James

Reputation: 15

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

Upvotes: -1

BigMountainStudio.com
BigMountainStudio.com

Reputation: 17560

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:

Named Color

Setting Just barTintColor

Just Bar Tint Color

(As you can see, it is slightly faded)

Setting Just backgroundColor

Just Background Color

(This darkens the bar a little bit)

Setting barTintColor & isTranslucent to False

isTranslucent & barTintColor

This combination is what did it for me:

UITabBar.appearance().isTranslucent = false
UITabBar.appearance().barTintColor = UIColor(named: "Secondary")

Upvotes: 38

Amir.n3t
Amir.n3t

Reputation: 3439

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)
    }
}

Upvotes: 2

Rubaiyat Jahan Mumu
Rubaiyat Jahan Mumu

Reputation: 4117

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"))
        }
    }
}

Upvotes: 38

Related Questions