How much flexibility with Liquid Glass and SwiftUI?

[pylapp]

Context

Flexibility of Liquid Glass

With iOS 26 Apple annouces Liquid Glass and provides API for that..
The aim is to apply blur, liquid, water drop, glassified effects and put more in evidence the content inside of navigations.
The Orange Brand strongly relies on strong colors, like orange and black, with a premium style, without relying on such effects too much energyzing and liquified.
Some studies have been required by design team to see how much we can play and customize Liquid Glass, its impact on native components, and what should be done in the end because it will be mandatory with iOS 27 and any project compiled with Xcode 27.

Configurations of app colors

In addition, if we compare with Android Material 3 which exposes API with a lot of configurations elements for colors (bg, accent, tint etc), it seems there are less items configurable with SwiftUI (e.g. primary and tint colors). A study should be done to provide the list of configurable elements for design team and their effects.

Notes

• Make comparisons with existing app like Orange et Moi using screenshots can be useful
• Check available behaviors (e.g. for tab bar, we can collapse items or expand them)

Conclusion

• The API does not seem stable enough, i.e. with tab bar background customization
• There are some materials to apply on background to change opacity
• For toolbar we can hide the Liquid Glass effect
• Items on tool bar can be merged or spaced
• Items on tab bar can have an additional behavior for iPad with sections
• The only "high level settings" app color we can change is the tint color (previously accent color), but it does not have any effect on OUDS components
• Tab bar can be hidden with all items stacked in leading position
• Tab bar can have an accessory but constrainted in height

Suggestions

1. Do not implement brand new tab bar without using native components
2. Send an issue to Apple to rise the issue on toolbar background material (if relevant)
3. Let users implement their tab bar and toolbar like they want, i.e. if OUDS provides components let flexibiltiy in the API

[pylapp]

Flexibility of Liquid Glass

Topics to tackle

• compare clear vs default mode
• for the bottom toolbar or tab bars, see if they can be stucked to borders or only floating
• see if we can remove or customize the water drop effect on bottom bar and tab bar
• see what can be done on navigation elements (side bars, menu bars, tab bars, toolbars, menus, drop downs): blur, tint, background color, foreground color, collapse, expand, etc

[pylapp]

Other interesting resources

• https://www.donnywals.com/exploring-tab-bars-on-ios-26-with-liquid-glass/
• https://developer.apple.com/documentation/swiftui/applying-liquid-glass-to-custom-views
• https://www.createwithswift.com/enhancing-the-tab-bar-with-a-bottom-accessory/
• https://appcircle.io/blog/wwdc-25-build-a-swiftui-app-with-the-new-design
• https://wwdcnotes.com/documentation/wwdcnotes/wwdc25-323-build-a-swiftui-app-with-the-new-design/

[pylapp]

Tab bar customizations

It seems the view modifier toolbar(_:for:) is buggy. Indeed on the design system toolbox and on a fake app using Xcode 26.0.1 / iOS 26 / Swift 6.2 context is is not possible to add a color or change the material for the tab bar.

However, it is possible to use such material to apply on background of some elements to change opacity

Attached

Fake project for tests:
TabBarBackgroundLiquidGlassTest.zip

Swift source code:
MainView.swift.zip

Screenshots

Video

1076.-.background.materials.MP4

[pylapp]

Change opacity with UIKit

On iOS 26 with Xcode 26.0.1, even appearance with UIKIt does not work

struct MainView: View {

    @Environment(\.theme) private var theme

    init() {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor.red
        
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
    }

    var body: some View {
        TabView {
            TokensPage()
                .tabItem {
                    Label("app_bottomBar_tokens_label", image: "ic_token")
                }
            ComponentsPage()
                .tabItem {
                    Label("app_bottomBar_components_label", image: "ic_component_atom")
                }
            AboutPage()
                .tabItem {
                    Label("app_bottomBar_about_label", image: "ic_info")
                }
        }
        .oudsAccentColor(theme.colors.colorContentBrandPrimary)
    }
}

[pylapp]

Customization of tab bars

• Compare usage of materials / tint of blur on tab bar with SwiftUI and UIKit
• Compare usage of UITabBarAppearance on tab bar with SwiftUI and UIKit
• Check if things still don't work with Xcode 26.1

[pylapp]

Clear and regular glass effects not working on tab view?

It seems differences are hard to catch or not existing of clear or regular glass effect applied to tab view (iOS 26.0)

The Swift code

import OUDS
import SwiftUI

struct MainView: View {

    @Environment(\.theme) private var theme

    var body: some View {
        if #available(iOS 26, *) {
            GlassEffectContainer {
                tabs
                    .glassEffect(.clear) // or glassEffect(.regular)
            }
        } else {
            tabs
        }
    }
    
    private var tabs: some View {
        TabView {
            TokensPage()
                .tabItem {
                    Label("app_bottomBar_tokens_label", image: "ic_token")
                }
            ComponentsPage()
                .tabItem {
                    Label("app_bottomBar_components_label", image: "ic_component_atom")
                }
            AboutPage()
                .tabItem {
                    Label("app_bottomBar_about_label", image: "ic_info")
                }
        }
        .oudsAccentColor(theme.colors.contentBrandPrimary)
    }

clear.glassEffect.mov

regular.glassEffect.mov

[pylapp]

Configurations of app colors

Topics to tackle

• which colors can be customized (action, tint, primary, ...)
• what are the effects (only on view, view and subviews, on components...)

[pylapp]

Some notes

• accentColor(_:) is deprecated is should be replaced by `tint(_:)
• it seems they have both the same effects
• in the design system toolbox the elements not overriden by OUDS are tinted: selected tabs, navigations element, links
• any OUDS components does no have this effect today

Screenshots

Swift code

struct MainView: View {

    @Environment(\.theme) private var theme

    var body: some View {
        TabView {
            TokensPage()
                .tabItem {
                    Label("app_bottomBar_tokens_label", image: "ic_token")
                }
            ComponentsPage()
                .tabItem {
                    Label("app_bottomBar_components_label", image: "ic_component_atom")
                }
            AboutPage()
                .tabItem {
                    Label("app_bottomBar_about_label", image: "ic_info")
                }
        }
        .accentColor(Color.orange)
        .tint(Color.green)
    }
}

[pylapp]

Management of tints

With iOS 26.1 Liquid Glass can be teinted or not, defined in user settings

MicrosoftTeams-video.mp4

[pylapp]

Investigations of @ludovic35

Tab Bar

1. Peut-on changer la couleur du label de l’élement sélectionné dans la tab bar pour des problèmes de contrast d’accessibilité ? La logique étant d’utiliser le accent color, mais au cas où

• Color

Il est possible de donner un accentColor différent qui peut être différent de l'accent color du reste de l'app<
Il est possible de donner une couleur septique pour l'item sélectionné et non sélectionné via l'api UIKit
Attention La couleur de l'icone non sélectionné ne change pas en iOS 26

let itemAppearance = UITabBarItemAppearance()
itemAppearance.normal.badgeBackgroundColor = UIColor.blue
itemAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.blue]
itemAppearance.normal.iconColor = .blue

itemAppearance.selected.badgeBackgroundColor = UIColor.red
itemAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red]
itemAppearance.selected.iconColor = .red

• iOS < 26

• iOS >= 26

• Font

Il est possible de changer la font, ce pendant elle se base sur UIFont or les tokens sont appliqué sur les fonts SwiftUI qui implique une double implementation.

let itemAppearance = UITabBarItemAppearance()
itemAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red, NSAttributedString.Key.font: UIFont.systemFont(ofSize: 20)]

• iOS < 26

• iOS >= 26

2. Quelle customisation possible sur le Badge (pastile, compteur, text, image)_Avec SwiftUI il est possible de faire un badge (sans text, avec un text, avec un conut)

Il est également possible de changer ça couleur via les API de UIKit, Exemple:

let tabBarAppearance = UITabBarAppearance()
let itemAppearance = UITabBarItemAppearance()
itemAppearance.normal.badgeBackgroundColor = UIColor.blue
itemAppearance.selected.badgeBackgroundColor = UIColor.red
tabBarAppearance.stackedLayoutAppearance = itemAppearance
        
UITabBar.appearance().standardAppearance = tabBarAppearance
UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance

• Unselcted

• Slected

3. Est-ce possible de mettre le top indicator sur un item de tabbar sur iOS 18 et iOS 26+ ?

-> Non en SwiftUI pas possible et en UIKit ne le permet pas nom plus

Nav Bar

Ajout de sous titre

En ios26, il est possible d'ajouter une sous title dans la navigation bar:

content.navigationSubtitle(Text("This is the subtitle"))

ou (Peut aussi être un bouton) et permet de modifier le style du texte

 content.toolbar {
     ToolbarItem(placement: .subtitle) {
          Text("This is the subtitle").font(.subheadline).foregroundStyle(.red)
          // Peut aussi être un bouton
          // Button("This is the subtitle") { /* ... */ }.font(.subheadline)
      }
  }

Pour toutes version iOS mais en rendu inline seulement

 content.toolbar {
                    ToolbarItem(placement: .principal) {
                        VStack {
                            Text("Title")
                                .fontWeight(.semibold)
                            
                            Text("Subtitle")
                                .font(.caption)
                                .foregroundStyle(.secondary)
                        }
                    }
                }

Items dans la bar

Les boutons en trailing peuvent être ajouter avec leur propre style comme l'exemple :

 .toolbar {
      ToolbarItem(placement: .topBarTrailing) {
           Button("Show Sheet", systemImage: "globe") { }
       }
}