# 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**](https://github.com/xavier7t/iOSDevX/blob/main/iOSDevX/202507-Jul%202025/DemoTabView20250735.swift).

### 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.

```swift
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.*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753486239925/8ca35e10-b933-4e5c-94c9-612ea2a1c6dc.png align="center")

### 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.

```swift
@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
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753488079596/3816e61a-2d12-4e0e-981d-99c2c81c1f98.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753488089798/f1da5909-d58e-4239-b3e4-d50daa7cfab9.png align="center")

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.

```swift
@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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753488107780/400b3fda-2cf3-4a27-b75f-75542965ab95.png align="center")

### ✅ 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 `NavigationStack`s 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**](http://buymeacoffee.com/xavierios).