AFAIK, swiftUI TabView does not provide much control like you cannot change background color as there is no direct public api. As it internally use UIKIt Tabbar which itself allows to change icon and text color only.
I would recommend you to create your own customTabView which is very simple to create for e.g. below and this also animate while you select the tabs
struct CustomTabView: View {
@State private var selectedTab: Tab = .today
@Namespace private var namespace
var body: some View {
VStack {
Spacer()
// Overlay Tab Bar
HStack {
tabItem(icon: "sparkles", title: "Chat", tab: .chat)
tabItem(icon: "calendar", title: "Today", tab: .today)
tabItem(icon: "list.bullet", title: "Reviews", tab: .reviews)
tabItem(icon: "square.stack", title: "Space", tab: .space)
}
.padding(8)
.background(
RoundedRectangle(cornerRadius: 30)
.fill(Color(.systemGray6))
)
.padding(.horizontal, 16)
.padding(.bottom, 10)
}
}
@ViewBuilder
private func tabItem(icon: String, title: String, tab: Tab) -> some View {
Button {
withAnimation(.easeInOut(duration: 0.25)) {
selectedTab = tab
}
} label: {
VStack(spacing: 4) {
Image(systemName: icon)
.font(.system(size: 18, weight: .medium))
Text(title)
.font(.system(size: 12))
}
.foregroundColor(selectedTab == tab ? .black : .gray)
.frame(maxWidth: .infinity)
.padding(.vertical, 10)
.background(
ZStack {
if selectedTab == tab {
RoundedRectangle(cornerRadius: 20)
.fill(Color.green.opacity(0.3)) // your highlight color
.matchedGeometryEffect(id: "customBg", in: namespace)
}
}
)
}
}
}
You can update your required color accordingly!
