How to implement iOS 26 Liquid Glass tab bar with separate floating action button?

Question

Apple's iOS 26 "Liquid Glass" introduces a new UI paradigm of a tab bar with a separate floating action button off to the side. This seems to be a common UI design used in many of Apple's stock iOS 26 apps.

Seen here in the News app in Xcode 26.0 beta iOS Simulator:

vs. the same app in iOS 18:

What stock UI component is Apple using to implement this new Liquid Glass tab bar with a floating "Following" or "Search" action button (without text label) separate from the other four icons?

How can I implement this same design in my iOS 26 app using stock iOS controls?

Answer 1

This is a TabView with one of the Tabs having the role of .search.

TabView {
    Tab("One", systemImage: "1.circle") {
        
    }
    Tab("Two", systemImage: "2.circle") {
        
    }
    Tab("Three", systemImage: "3.circle") {
        
    }
    Tab("Four", systemImage: "4.circle", role: .search) {
        NavigationStack {
            
        }
    }
}
.searchable(text: $search)

By adding .searchable to the TabView and a NavigationStack in the search tab, a search bar appears to replace the tab bar when you switch to that tab, just like in the News app.

Answer 2

In Storyboard

You can select Search as the system item of the Tab Bar Item:

---

UIKit (🎁 With custom icon)

Pass the .search case as the systemItem of the tabBarItem:

tabBarItem = UITabBarItem(tabBarSystemItem: .search, tag: 1) // 👈 Make the tab separated from the rest

tabBarItem.image = UIImage(systemName: "house") // 👈 Any UIImage as the custom icon

⚠️ Note that it seems required to select .search if you want it to be separated from the rest of the bar.