When your app has a tab bar and also you recompile it utilizing Xcode 26, you’ll robotically see that your tab bar has a brand new appear and feel based mostly on Liquid Glass. On this weblog put up, we’ll discover the brand new tab bar, and which new capabilities we’ve gained with the Liquid Glass redesign. I’ll additionally spend a little bit little bit of time on offering some suggestions round how one can conditionally apply iOS 26 particular view modifiers to your tab bar utilizing Dave DeLong’s “Backport” method.
By the top of this put up you’ll have a a lot better sense of how Liquid Glass adjustments your app’s tab bar, and how one can configure the tab bar to essentially lean into iOS 26’s Liquid Glass design philosophy.
Tab Bar fundamentals in iOS 26
When you’ve adopted iOS 18’s tab bar updates, you’re already in a very great place for adopting the brand new options that we get with Liquid Glass. When you haven’t, right here’s what a quite simple tab bar appears like utilizing TabView and Tab:
TabView {
Tab("Exercises", systemImage: "dumbbell.fill") {
WorkoutsView()
}
Tab("Workouts", systemImage: "determine.strengthtraining.conventional") {
ExercisesView()
}
}
If you compile your app with Xcode 26, and also you run it on a tool with iOS 18 put in, your tab bar would look a bit like this:
When operating the precise some code on iOS 26, you’ll discover that the tab bar will get a brand new Liquid Glass based mostly design:
Liquid glass encourages a extra layer method to designing your app, so having this method the place there’s a big button above the tab bar and obscuring content material isn’t very iOS 26-like.
Right here’s what the total display screen that this tab bar is on appears like:
To make this app really feel extra at dwelling on iOS 26, I believe we must always increase the record’s contents in order that they find yourself beneath the tab bar utilizing a little bit of a blurry overlay. Much like what Apple does for their very own apps:
Discover that this app has a left-aligned tab bar and that there’s a search button on the backside as properly. Earlier than we speak a bit about the best way to obtain that format, I’d wish to discover the setup the place they’ve content material that expands beneath the tab bar first. After that we’ll take a look at extra superior tab bar options like having a search button and extra.
Understanding the tab bar’s blur impact
When you’ve hung out with the tab bar already, you’ll know that the blur impact that we see within the well being app is definitely the default impact for a tab bar that sits on prime of a scrollable container.
The app we’re on this put up has a view format that appears a bit like this:
VStack {
ScrollView(.horizontal) { /* filter choices */ }
Listing { /* The workouts */ }
Button { /* The purple button + motion */
}
The ensuing impact is that the tab doesn’t overlay a scrolling container, and we find yourself with a strong coloured background.
If we take away the button for now, we truly get the blurred background habits that we wish:
The subsequent goal now could be so as to add that “Add Train” button once more in a approach that blends properly with Liquid Glass, so let’s discover another cool tab view behaviors on iOS 26, and the way we are able to allow these.
Minimizing a Liquid Glass tab view
Let’s begin with a cool impact that we are able to apply to a tab bar to make it much less distinguished whereas the person scrolls.
Whereas this impact doesn’t deliver our “Add Train” button again, it does opt-in to a characteristic from iOS 26 that I like quite a bit. We are able to have our tab bar reduce when the person scrolls up or down by making use of a brand new view modifier to our TabView:
TabView {
/* ... */
}.tabBarMinimizeBehavior(.onScrollDown)
When this view modifier is utilized to your tab view, it’ll robotically reduce itself when the content material that’s overlayed by the tab bar will get scrolled. So in our case, the tab bar minimizes when the record of workouts will get scrolled.
Be aware that the tab bar doesn’t reduce if we’d apply this view modifier with the previous design. That’s as a result of the tab bar didn’t overlay any scrolling content material. This makes it much more clear that the previous design actually doesn’t match properly in a liquid glass world.
Let’s see how we are able to add our button on prime of the Liquid Glass TabView in a approach that matches properly with the brand new design.
Including a view above your tab bar on iOS 26
On iOS 26 we’ve gained the flexibility so as to add an adjunct view to our tab bars. This view will probably be positioned above your tab bar on iOS and when your tab bar minimizes the accent view is positioned subsequent to the minimized tab bar button:
Be aware that the button appears a little bit reduce off within the minimized instance. This appears to be a however within the beta so far as I can inform proper now; if later within the beta cycle it seems that I’m doing one thing flawed right here, I’ll replace the article as wanted.
To position an adjunct view on a tab bar, you apply the tabViewBottomAccessory view modifier to your TabView:
TabView {
/* ... */
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
Button("Add train") {
// Motion so as to add an train
}.purpleButton()
}
Be aware that the accent will probably be seen for each tab in your app so our utilization right here may not be the very best method; but it surely works. It’s doable to test the energetic tab inside your view modifier to return completely different buttons or views relying on the energetic tab:
.tabViewBottomAccessory {
if activeTab == .exercises {
Button("Begin exercise") {
// Motion so as to add an train
}.purpleButton()
} else {
Button("Add train") {
// Motion so as to add an train
}.purpleButton()
}
}
Once more, this works however I’m undecided that is the supposed use case for a backside accent. Apple’s personal utilization appears fairly restricted to views which might be related for each view within the app. Just like the music app the place they’ve participant controls because the tab view’s accent.
So, whereas this method allow us to add the “Add train” button once more; it looks as if this isn’t the way in which to go.
Including a floating button to our view
Within the well being app instance from earlier than, there was a search button within the backside proper aspect of the display screen. We are able to add a button of our personal to that location through the use of a TabItem in our TabView that has a .search function:
Tab("Add", systemImage: "plus", worth: Tabs.workouts, function: .search) {
/* Your view */
}
Whereas this provides a backside to the underside proper of our view, it’s removed from an answer to changing our view-specific “Add train” button. A Tab that has a search function is separated out of your different tabs however you’re anticipated to current a full display screen view from this tab. So a search tab actually solely is sensible when your present tab bar accommodates a search web page.
That stated, I do assume {that a} floating button is what we’d like on this Liquid Glass world so let’s add one to our workouts view.
It gained’t use the TabView APIs however I do assume it’s necessary to cowl the answer that works properly in my view.
On condition that Liquid Glass enforces a extra layered design, this sample of getting a big button on the backside of our record simply doesn’t work in addition to it used to.
As an alternative, we are able to leverage a ZStack and add a button on prime of it so we are able to have our scrolling content material look the way in which that we like whereas additionally having an “Add Train” button:
ZStack(alignment: .bottomTrailing) {
// view contents
Button(motion: {
// ...
}) {
Label("Add Train", systemImage: "plus")
.daring()
.labelStyle(.iconOnly)
.padding()
}
.glassEffect(.common.interactive())
.padding([.bottom, .trailing], 12)
}
The important thing to creating our floating button take a look at house is making use of the glassEffect view modifier. I gained’t cowl that modifier in depth however you may most likely guess what it does; it makes our button have that Liquid Glass design that we’re searching for:
I’m not 100% offered on this method as a result of I felt like there was one thing good about having that enormous purple button in my previous design. However, this can be a new design period. And this feels prefer it’s one thing that might match properly within the iOS 26 design language.
In Abstract
Understanding which choices you’ve got for customizing iOS 26’s TabView will enormously assist with adopting Liquid Glass. Understanding how one can reduce your tab bar, or when to assign an adjunct view can actually provide help to construct higher experiences to your customers. Including a search tab with the search function will assist SwiftUI place your search characteristic correctly and constantly throughout platforms.
Whereas Liquid Glass is a large change when it comes to design language, I like these new TabView APIs quite a bit and I’m excited to spend extra time with them.
