{"id":74193,"date":"2025-09-07T16:47:54","date_gmt":"2025-09-07T11:17:54","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=74193"},"modified":"2025-09-23T10:49:59","modified_gmt":"2025-09-23T05:19:59","slug":"apples-liquid-glass-ui-whats-new-in-ios-26","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/apples-liquid-glass-ui-whats-new-in-ios-26\/","title":{"rendered":"Apple\u2019s Liquid Glass UI: What\u2019s New in iOS 26"},"content":{"rendered":"

Apple has introduced a new user interface material in iOS 26 called Liquid Glass, which captures light beautifully while also resembling the motion of a liquid.
\nIt combines the optical properties of glass, such as transparency, light refraction, shine, mirror-like surfaces, and a clean, crisp appearance, with a sense of fluidity, featuring curves, waves, and smooth transitions that avoid sharp angles.<\/p>\n

In this blog, I\u2019ll try to explain the concept of Liquid Glass and provide code examples for integrating it into SwiftUI apps<\/p>\n

What is Liquid Glass?<\/h2>\n

Liquid Glass is a new visual effect introduced across Apple products, inspired by the real-world properties of glass and water.
\nThis effect behaves like both glass and fluid, it reacts in real time to user touches and pointer interactions, while reflecting surrounding colors and light.<\/p>\n

\"Liquid

Liquid Glass effects<\/p><\/div>\n

In this image, you can notice that controls like buttons reflect the colors and light from the background image, and the button shows visual changes when clicked<\/p>\n

Using Liquid Glass in Existing Apps<\/h2>\n

The good news is that you don’t need to redesign your existing apps to adopt Liquid Glass. System-provided components from UIKit & SwiftUI automatically adopt Liquid Glass when running with the latest iOS SDK.<\/p>\n

1. Update your development environment\u00a0<\/strong>– The initial step to use Liquid Glass is to run your app with the latest Xcode version (Xcode 26) and compile it for iOS 26. As soon as your app runs on iOS 26, you will see existing system elements adopt the Liquid Glass look and feel.<\/p>\n

2. Adopt System Frameworks<\/strong> \u2013 To fully leverage Liquid Glass, you should always use system-provided components as much as possible. Customisations like background colors for navigation components may interfere dynamic effects of Liquid Glass.<\/p>\n

 <\/p>\n

Things to Avoid with Liquid Glass in SwiftUI<\/h2>\n
    \n
  • Avoid adding .blur, .opacity, or .background on a glassEffect.<\/li>\n
  • Avoid placing solid fills (such as Color.white or Color.black) behind a glass view.<\/li>\n
  • Avoid using .clipShape on a glassEffect View.<\/li>\n
  • Avoid using GlassEffectContainer for a glassEffect view inside another GlassEffectContainer.<\/li>\n
  • Avoid custom transparency with .opacity(0.x) on overlays.<\/li>\n
  • Avoid adding your own .background or another glassEffect to toolbars, as they already use the built-in Liquid Glass.<\/li>\n
  • Avoid manual blur or opacity animations with Liquid Glass.<\/li>\n<\/ul>\n

    Liquid Glass Navigation: Clear Hierarchy<\/h2>\n

    Navigation elements like tab bars and sidebars are added on top of the Liquid Glass layer and create a separate functional layer above your content<\/p>\n

    Tab Bar Minimisation<\/strong><\/p>\n

    In iOS 26, you can increase the visible content area by minimising tab bars while scrolling, while still providing quick access to navigation<\/p>\n

      \n
    • \u00a0TabView { … }.tabBarMinimizeBehavior(.onScrollDown)<\/li>\n<\/ul>\n

      Flexible Toolbars<\/strong><\/p>\n

      In iOS 26, Liquid Glass appearance is also available for toolbars, with support for flexible item grouping. You can also apply a blur effect to shared backgrounds<\/p>\n

        \n
      • You can create flexible grouping with ToolbarSpacer(.flexible)<\/li>\n<\/ul>\n

        Custom Views with Liquid Glass Effects<\/h2>\n

        With custom elements, you can fully control the look and feel of Liquid Glass<\/p>\n

          \n
        • GlassEffectContainer – Container view that groups multiple liquid glass views so they can share rendering, blending, and morphing effects.<\/li>\n
        • glassEffect(…) – Applies the Liquid Glass effect.<\/li>\n<\/ul>\n

          Variants of glassEffect(…) and options<\/p>\n

            \n
          • .glassEffect(.identity)<\/li>\n
          • .glassEffect(.clear)<\/li>\n
          • .glassEffect(.regular)<\/li>\n
          • .glassEffect(.regular.interactive())<\/li>\n
          • .glassEffect(.regular, in: SomeShape())<\/li>\n
          • .glassEffect(…, in: SomeShape()).interactive()<\/li>\n<\/ul>\n

            Let\u2019s understand the above topics with a sample app that displays a list of feeds and the details of a selected feed, with options to change the background image, text color, and text size. You can also mark any feed as a favorite. The main focus will be on implementing Liquid Glass across different types of UIs.<\/p>\n

            Open Xcode 26 and create new app<\/strong><\/p>\n

            \"App

            App Name<\/p><\/div>\n

            \"Creating

            Creating New App in Xcode 26<\/p><\/div>\n

             <\/p>\n

             <\/p>\n

             <\/p>\n

             <\/p>\n

             <\/p>\n

             <\/p>\n

             <\/p>\n

             <\/p>\n

            The first step for a Liquid Glass project in Xcode 26 is to create an app icon using the new Icon Composer provided in Xcode 26.<\/p>\n

            Let\u2019s understand what Icon Composer is and how it works<\/p>\n

            Update Your App Icon for Liquid Glass<\/strong><\/p>\n

            You can now update your app icon with a layered design that adapts to system effects and different appearances, such as Light, Dark, Clear, and Tinted.
            \nDesign Guidelines for Icons:<\/p>\n

              \n
            • Layered Design:<\/strong> Use separate layers for the foreground, middle, and background.<\/li>\n
            • Simplified Forms:<\/strong> Use solid, filled, or semi-transparent shapes.<\/li>\n
            • System Effects:<\/strong> Allow the system to handle masking, blurring, reflections, and shadows.<\/li>\n<\/ul>\n

              Use Icon Composer (available in Xcode and Apple Design Resources) to preview and assemble your layered icons.<\/p>\n

              \"Icon

              Clear Light Tinted<\/p><\/div>\n

              \"Icon

              Clear Dark Tinted<\/p><\/div>\n

              \"Icon

              Clear Dark<\/p><\/div>\n

              \"Icon

              Default Clear<\/p><\/div>\n

              \"Icon

              Dark<\/p><\/div>\n

              \"Icon

              Default<\/p><\/div>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

              In the above six images, you can see that I am using three different icons as layers with solid and filled shapes. When exporting this icon from Icon Composer in the .icon format, it will automatically adapt its appearance for Dark, Light, Clear, and Tinted modes<\/p>\n

              Once your icon is finalised in Icon Composer, save it in .icon format, then drag and drop it into your Xcode project and update the App Icon in the General tab.<\/p>\n

              \"AppIcon

              AppIcon added in project<\/p><\/div>\n

              \"AppIcon

              AppIcon configured for project<\/p><\/div>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

               <\/p>\n

              We will structure our project by adding the following files, each with a clear responsibility<\/p>\n

              TabBarView.swift \u2013 Main App Navigation with Feeds, Favourites, and optional Profile\/Settings tabs
              \n<\/strong><\/p>\n

              \"TabBarView.swift\"

              TabBarView.swift<\/p><\/div>\n

              FeedView.swift \u2013 Home screen showing a list of feeds with navigation to details
              \n<\/strong><\/p>\n

              \"FeedView.swift\"

              FeedView.swift<\/p><\/div>\n

              FeedDetails.swift \u2013 Detailed view of a feed with favourite toggle support
              \n<\/strong><\/p>\n

              \"FeedDetails.swift\"

              FeedDetails.swift<\/p><\/div>\n

              FavouriteView.swift \u2013 Tab showing user\u2019s saved favourite feeds
              \n<\/strong><\/p>\n

              \"FavouriteView.swift\"

              FavouriteView.swift<\/p><\/div>\n

              SettingsView.swift \u2013 Provides UI to change the app\u2019s background image and text color
              \n<\/strong><\/p>\n

              \"SettingsView.swift\"

              SettingsView.swift<\/p><\/div>\n

              Feed.swift \u2013 Data model defining feed properties and structure<\/strong><\/p>\n

              \"Feed.swift\"

              Feed.swift<\/p><\/div>\n

               <\/p>\n

              FeedViewModel.swift \u2013 ViewModel managing feeds, favourites, and app state<\/p>\n

              \"FeedViewModel.swift\"

              FeedViewModel.swift<\/p><\/div>\n

               <\/p>\n

              Now, let\u2019s run the app to see the Liquid Glass effects in action<\/h2>\n
              \"DarkTinted\"

              DarkTinted Mode<\/p><\/div>\n

              \"LightTinted\"

              LightTinted Mode<\/p><\/div>\n

              \"Clear\"

              Clear Mode<\/p><\/div>\n

              \"Dark\"

              Dark Mode<\/p><\/div>\n

              \"Default\"

              Default Mode<\/p><\/div>\n

              \"FeedView\"

              Feed View<\/p><\/div>\n

              \"FeedDetailView\"

              Feed Detail View<\/p><\/div>\n

              \"FeedDetailFavourite\"

              Feed Detail Favourite<\/p><\/div>\n

              \"TabMinimisation\"

              Tab Minimisation with Scroll Edge effects<\/p><\/div>\n

              \"FavouriteList\"

              Favourite List<\/p><\/div>\n

              \"SettingsView\"

              Settings View<\/p><\/div>\n

              \"FeedDetailAfterSettings\"

              Feed Detail with changed Settings<\/p><\/div>\n

               <\/p>\n

              Conclusion<\/h2>\n

              Liquid Glass is a very useful new design material that helps developers create more dynamic, good-looking, and user-friendly applications. By understanding the core principles of Liquid Glass and using the provided APIs in SwiftUI, you can easily integrate this glass effect into your apps. Start UI development with Liquid Glass today, and let your app’s UI shine with fluidity and elegance<\/p>\n","protected":false},"excerpt":{"rendered":"

              Apple has introduced a new user interface material in iOS 26 called Liquid Glass, which captures light beautifully while also resembling the motion of a liquid. It combines the optical properties of glass, such as transparency, light refraction, shine, mirror-like surfaces, and a clean, crisp appearance, with a sense of fluidity, featuring curves, waves, and […]<\/p>\n","protected":false},"author":2133,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":407},"categories":[1400],"tags":[6758,7798,1401,7799,5460],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74193"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2133"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=74193"}],"version-history":[{"count":46,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74193\/revisions"}],"predecessor-version":[{"id":76564,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74193\/revisions\/76564"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=74193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=74193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=74193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}