iosswiftuiswiftui-tabviewios26liquid-glass

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


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:

enter image description here

vs. the same app in iOS 18:

enter image description here

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?


Solution

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

    enter image description here

    enter image description here