Change Tabbed View Bar Color 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?

score 37 · Answer 1 · edited Jun 20 '20 at 09:12

37

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 11 '20 at 14:19

Mark Moeykens

15,915
6
63
62

3

This worked for me and the accepted answer did not; I had tried to make the background white, and with the accepted answer it stayed gray (albeit slightly lighter than before). Thanks! – blub Jun 01 '20 at 20:14
I had to use: `UITabBar.appearance().scrollEdgeAppearance = appeareance` – Sajjon Feb 28 '22 at 06:50

score 35 · Accepted Answer · answered Jul 10 '19 at 13:15

35

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

answered Jul 10 '19 at 13:15

Rubaiyat Jahan Mumu

3,887
1
33
35

6

Just a warning that this answer relies on SwiftUI to use `UITabBar` to represent a `TabbedView`. This could change at any time—for example, if Apple creates a pure swift tab bar. – mbxDev Jul 12 '19 at 17:13
4

In that case, I will update the answer or someone will. – Rubaiyat Jahan Mumu Jul 13 '19 at 05:34
Hi @mumu, I tried to do this but it somehow makes the tab color opaque. Do you have any suggestion for a workaround? – ygee Sep 24 '19 at 09:08
2

@grey - See the answer below. UITabBar.appearance().barTintColor = UIColor.blue – Yarm Oct 05 '19 at 16:33

score 18 · Answer 3 · edited Nov 21 '22 at 21:58

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

score 6 · Answer 4 · answered Sep 28 '22 at 15:57

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
    }
   

}

score 3 · Answer 5 · answered Mar 02 '20 at 15:11

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.

score 3 · Answer 6 · answered Jul 26 '21 at 15:28

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

It works (especially shadow color)! But you can set it on <.onAppear{}> block or on view init() {} — WINSergey, Aug 21 '21 at 17:15

score 3 · Answer 7 · answered Aug 21 '21 at 17:55

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
}

score 2 · Answer 8 · answered Aug 11 '19 at 13:48

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

score 1 · Answer 9 · answered Aug 19 '22 at 04:02

1

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

answered Aug 19 '22 at 04:02

Balwinder Singh Sohi

41
5

score -1 · Answer 10 · answered Oct 01 '20 at 16:34

-1

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

answered Oct 01 '20 at 16:34

James

15
6

Change Tabbed View Bar Color SwiftUI

10 Answers10

SwiftUI 1.0 - Using named colors

Combining `barTintColor` and `isTranslucent`

Setting Just `barTintColor`

Setting Just `backgroundColor`

Setting `barTintColor` & `isTranslucent` to False

Linked

Change Tabbed View Bar Color SwiftUI

10 Answers10

SwiftUI 1.0 - Using named colors

Combining barTintColor and isTranslucent

Setting Just barTintColor

Setting Just backgroundColor

Setting barTintColor & isTranslucent to False

Linked

Combining `barTintColor` and `isTranslucent`

Setting Just `barTintColor`

Setting Just `backgroundColor`

Setting `barTintColor` & `isTranslucent` to False