NeuroAgent

Complete Guide: Disable Liquid Glass Effect on iOS 15+ TabView

Learn how to disable the Liquid Glass effect on TabView in iOS 15+ using UITabBarAppearance. Make your tab bar fully transparent with custom backgrounds.

#ios-15-ui-changes#mobile-development#swift-programming#swiftui-tabview-customization#uitabbarappearance
Question

How to disable the Liquid Glass effect on TabView in iOS 15+?

I’m trying to remove the Liquid Glass/translucent blur background from the TabView in iOS 15+. I want the tab bar to be fully transparent so my custom background image shows through. Currently, the tab bar still renders a frosted/blurred material effect.

Here’s my current TabView implementation:

swift
struct ContentView: View {
    var body: some View {
            
        TabView {
            HomeView()
                .tabItem() {
                    Image("home")
                    
                }
            
            ListView()
                .tabItem() {
                    Image("list")
                }
            
            ProfileView()
                .tabItem() {
                    Image("profile")
                }
                
        }
        
        
    }
}

#Preview {
    ContentView()
}

How can I disable the Liquid Glass effect and make the tab bar fully transparent?

NeuroAgent

In iOS 15+, SwiftUI’s TabView automatically applies a Liquid Glass effect that creates a translucent, blurred background. To disable this effect and achieve full transparency, you need to customize the underlying UITabBar appearance using UITabBarAppearance, which provides more control over the tab bar’s visual properties.

Contents

Main Solution: Using UITabBarAppearance

The most reliable method to disable the Liquid Glass effect is to customize the UITabBar appearance in your TabView’s onAppear modifier. This approach directly modifies the underlying UIKit tab bar properties.

swift
struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        TabView(selection: $selection) {
            HomeView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
                .tag(0)
            
            ListView()
                .tabItem {
                    Image(systemName: "list.bullet")
                    Text("List")
                }
                .tag(1)
            
            ProfileView()
                .tabItem {
                    Image(systemName: "person.circle.fill")
                    Text("Profile")
                }
                .tag(2)
        }
        .onAppear {
            // Disable Liquid Glass effect
            if #available(iOS 15.0, *) {
                let appearance = UITabBarAppearance()
                appearance.configureWithOpaqueBackground()
                appearance.backgroundColor = UIColor.clear
                appearance.shadowColor = UIColor.clear
                
                UITabBar.appearance().standardAppearance = appearance
                UITabBar.appearance().scrollEdgeAppearance = appearance
            }
        }
    }
}

Key points:

  • configureWithOpaqueBackground() ensures no transparency
  • backgroundColor = UIColor.clear makes the background fully transparent
  • shadowColor = UIColor.clear removes the separator line
  • Both standardAppearance and scrollEdgeAppearance need to be set

Alternative Approach: Material Customization

For a more SwiftUI-native approach, you can use material modifiers to control the transparency effect:

swift
struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            
            ListView()
                .tabItem {
                    Image(systemName: "list.bullet")
                    Text("List")
                }
            
            ProfileView()
                .tabItem {
                    Image(systemName: "person.circle.fill")
                    Text("Profile")
                }
        }
        .background(Color.clear)
        .preferredColorScheme(.light) // Helps control material behavior
    }
}

However, this approach is less reliable than UITabBarAppearance customization as the Liquid Glass effect is applied at the UIKit level and may still persist.

Complete Transparent Tab Bar Implementation

Here’s a more complete implementation that handles various scenarios:

swift
struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        TabView(selection: $selection) {
            HomeView()
                .tabItem {
                    Image("home")
                    Text("Home")
                }
                .tag(0)
            
            ListView()
                .tabItem {
                    Image("list")
                    Text("List")
                }
                .tag(1)
            
            ProfileView()
                .tabItem {
                    Image("profile")
                    Text("Profile")
                }
                .tag(2)
        }
        .onAppear {
            setupTabBarAppearance()
        }
        .onChange(of: selection) { _ in
            // Reapply appearance when selection changes
            setupTabBarAppearance()
        }
        .background(
            // Your custom background image
            Image("background")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
        )
    }
    
    @available(iOS 15.0, *)
    private func setupTabBarAppearance() {
        let appearance = UITabBarAppearance()
        
        // Configure for complete transparency
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor.clear
        appearance.shadowImage = UIImage()
        appearance.backgroundImage = UIImage()
        appearance.shadowColor = UIColor.clear
        
        // Apply to both standard and scroll edge appearances
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
        
        // Optional: Customize tab item appearance
        let itemAppearance = UITabBarItemAppearance()
        itemAppearance.normal.titleTextAttributes = [
            .foregroundColor: UIColor.white
        ]
        itemAppearance.selected.titleTextAttributes = [
            .foregroundColor: UIColor.systemBlue
        ]
        appearance.stackedLayoutAppearance = itemAppearance
    }
}

Handling Edge Cases and Layout Issues

Missing Top Border Issue

If you notice the top border disappears after removing transparency:

swift
@available(iOS 15.0, *)
private func setupTabBarAppearance() {
    let appearance = UITabBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = UIColor.white // Use white instead of clear
    appearance.shadowColor = UIColor.black // Add shadow for border effect
    
    UITabBar.appearance().standardAppearance = appearance
    UITabBar.appearance().scrollEdgeAppearance = appearance
}

Safe Area Issues

When working with custom backgrounds:

swift
.background(
    Image("background")
        .resizable()
        .scaledToFill()
        .ignoresSafeArea()
)
.edgesIgnoringSafeArea(.bottom) // Prevent tab bar from covering content

Best Practices for Tab Bar Customization

  1. Always check iOS availability - Use #available(iOS 15.0, *) checks
  2. Apply appearance in onAppear - Ensures the tab bar is properly initialized
  3. Handle appearance changes - Reapply when selection changes or view appears
  4. Test on different devices - iPad and iPhone may behave differently
  5. Consider content legibility - Ensure your custom background doesn’t make tab items hard to read

Performance Considerations

swift
struct ContentView: View {
    @State private var appearanceSet = false
    
    var body: some View {
        TabView {
            // Your tab items
        }
        .onAppear {
            guard !appearanceSet else { return }
            setupTabBarAppearance()
            appearanceSet = true
        }
    }
    
    @available(iOS 15.0, *)
    private func setupTabBarAppearance() {
        // Setup code
    }
}

Troubleshooting Common Issues

Issue: Tab bar still shows transparency

Solution: Ensure you’re setting both standardAppearance AND scrollEdgeAppearance:

swift
UITabBar.appearance().standardAppearance = appearance
UITabBar.appearance().scrollEdgeAppearance = appearance

Issue: Content overlaps with tab bar

Solution: Use .edgesIgnoringSafeArea(.bottom) on your content:

swift
HomeView()
    .edgesIgnoringSafeArea(.bottom)

Issue: Tab items disappear or become invisible

Solution: Check your color scheme and ensure proper contrast:

swift
.foregroundColor(.white) // For tab item icons/text
.background(Color.clear) // For tab bar background

Sources

  1. Reddit r/SwiftUI - Disable new iOS 15’s transparent TabView
  2. Stack Overflow - Making TabView not translucent on SwiftUI
  3. Osas Blogs - How to Make Your TabBar Non-Transparent in SwiftUI
  4. Stack Overflow - SwiftUI TabView disable background transparency
  5. Hacking with Swift Forums - Tab Bar Transparent

Conclusion

Disabling the Liquid Glass effect in iOS 15+ TabView requires working with the underlying UIKit components through UITabBarAppearance. The most effective solution involves:

  1. Using configureWithOpaqueBackground() to eliminate transparency
  2. Setting backgroundColor = UIColor.clear for full transparency
  3. Configuring both standardAppearance and scrollEdgeAppearance
  4. Applying settings in onAppear for proper initialization

Remember to test your implementation across different iOS versions and device types, as the Liquid Glass effect behavior may vary. If you need maximum control over your tab bar appearance, combining UITabBar customization with careful layout management will give you the best results.

How to customize TabView icons and text colors in iOS 15+?What are the differences between standardAppearance and scrollEdgeAppearance in UITabBar?How to handle safe area issues with custom TabView backgrounds in SwiftUI?Can I use custom fonts in TabView items on iOS 15+?How to add custom animations to TabView transitions in iOS 15+?What are the performance implications of custom TabView appearances?
Ask NeuroAgent