Liquid Glass Tab View in SwiftUI

Hi iOS devs, it’s been a long while since last time! Here I’m back with some cool stuff about iOS 26~

iOS 26 brings a refined aesthetic to TabView—with a native liquid glass effect and powerful new APIs like .tabViewBottomAccessory. In this tutorial, we’ll walk through building a searchable, tinted TabView with a floating bottom action, which the fancy liquid glass effect.

Let’s get started! 🚀 PS: The code in this post is available here.

Step 1: Create a Placeholder List View

This simple list helps demonstrate the colorful aesthetics behind the liquid glass. You can swap this with real data later.

private var placeholderList: some View {
    List {
        ForEach(Array(0...10), id: \.self) { index in
            Text("Row \(index)")
                .foregroundStyle(.black)
                .bold()
                .padding(.vertical)
                .listRowBackground(
                    Color(hue: CGFloat(index) / 10, saturation: 0.55, brightness: 0.9)
                )
        }
    }
}

💡 Each row gets a unique hue, helping you visualize transparency and layering effects.

Step 2: Build the TabView with Search and Navigation

The Tab API introduced in iOS 18 (and enhanced in iOS 26) lets you customize each tab with SF Symbols and roles. In iOS 26, Tab with search role (SwiftUI alternative of UISearchTab in UIKit), got a new look.

@available(iOS 18, *)
var tabView: some View {
    TabView {
        Tab("Search", systemImage: "magnifyingglass", role: .search) {
            NavigationStack {
                placeholderList
                    .searchable(text: $searchText, prompt: "Looking for something?")
                    .navigationTitle("Search")
            }
        }
        Tab("Home", systemImage: "house") {
            NavigationStack {
                placeholderList
                    .navigationTitle("Home")
            }
        }
        Tab("Settings", systemImage: "gear") {
            NavigationStack {
                placeholderList
                    .navigationTitle("Settings")
            }
        }
    }
    .tint(.teal) // adjust this color based on your use case
}

Note that the order/position of tab with search role matters. If it’s the first tab in tab view, search tab will show with search bar expanded by default. Otherwise others tabs will show and users have to tap on the magnifying glass icon to expand the search bar.

Step 3: Add the Liquid Glass Bottom Accessory

In iOS 26, TabView supports .tabViewBottomAccessory, perfect for floating call-to-action buttons.

@ViewBuilder
var mainView: some View {
    if #available(iOS 26.0, *) {
        tabView
            .tabViewBottomAccessory {
                Button {
                    // Your action goes here
                } label: {
                    HStack {
                        Image(systemName: "plus")
                        Text("Add a new record now")
                    }
                }
                .bold()
                .tint(.primary)
            }
    } else if #available(iOS 18, *) {
        tabView // Fallback for older versions
    }
}

🧪 This button floats above the TabView like a piece of interactive glass.

✅ Final Thoughts

This is how you can build a modern, beautiful TabView experience in iOS 26 with SwiftUI. You now have:

• A searchable list

• A three-tab interface using the modern Tab API

• A floating bottom accessory

• Liquid glass effect and dynamic coloring baked in

---

🧼 Bonus Tip: Clean Design Matters

• Use .tint(_:) consistently for accent color theming.

• Keep your NavigationStacks lightweight.

• Use #available checks to maintain backward compatibility.

Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios.