In a TabView/TabItem, how can I change the image for the highlighted item and don't use the accent color?

Question

Given

TabView {
    WelcomeView()
        .tabItem {
            Label("Home", systemImage: "house")
        }
}

renders the TabView in the default color and, when active, the highlighted color:

and active:

I would like to change the icon to another one when highlighted instead, like house.circle, and not using the accent color, for leanness, like so:

Is there a smart way I am missing to use the default TabView behavior and not rebuild its logic and state handling? I would like to keep the code as simple as possible since I am a bloody beginner.

Thanks y'all for your help!

I never tested, but may be you can try to add a test when setting the image name like : systemImage: selectedTab == 2 ? " home.circle" : "home" — Ptit Xav, Mar 25 '23 at 19:30

score 1 · Accepted Answer · answered Mar 27 '23 at 06:03

You can use "selection" property of TabView to change image and "gray" color as accentColor. The following code may help you.

import SwiftUI

struct Sample: View {
    @State private var selection = true
    var body: some View {
        TabView(selection: $selection) {
            Text("Home")
                .tabItem {
                    if selection == true {
                        Image(systemName: "house.circle")
                    }
                    else {
                        Image(systemName: "house")
                    }
                    Text("Home")
                }
                .tag(true)
            Text("Sign UP")
                .tabItem {
                    if selection == false {
                        Image(systemName: "person")
                    }
                    else {
                        Image(systemName: "person.2.slash")
                    }
                    Text("Account")
                }
                .tag(false)
        }
        .accentColor(.gray)
    }
}

Thank you! I used an enum to represent the selected Tag which feels cleaner than using a boolean, but you've definitely solved my issue. I also used the ternary operator for the Image definition (like `systemName: selection ? "house.circle" : "house"`) — Adrian Föder, Mar 28 '23 at 08:46

In a TabView/TabItem, how can I change the image for the highlighted item and don't use the accent color?

1 Answers1