Instruction

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

With Liquid Glass being a brand new design system, Apple is keen for developers to adopt it. Adoption helps Apple demonstrate the design system is a success, and so they’re doing everything they can to make it easy for you as a developer to implement it.

You saw this approach in the first lesson, where by just building the Cards app for iOS 26, the app upgraded to use Liquid Glass with no code changes. Apple provide other ways to make the adoption as easy as possible too. They’ve created an entire page in their documentation on how to adopt Liquid Glass into your apps using best practices.

For this lesson, you’ll continue to work on the Cards app from lesson 1. You’ll apply these best practices to the app, giving you an opportunity to get familiar with Liquid Glass. You’ll also get a feel going through the process of transitioning an app from flat design into Liquid Glass.

Leveraging System Frameworks

Open the Starter project for this lesson, and build the app using an iOS 26 device or simulator. Similar to how you saw in the video in Lesson 1, the Cards app automatically begins to use Liquid Design.

Reviewing Your App Controls

Now that the Cards app is using Liquid Glass, the next step is to review it to ensure there are no bugs within the controls. Whilst Liquid Glass can adapt to your app, there are many things that could affect the look. Let’s look at an example.

The bottom toolbar looks a little tight
Vso zovpul zuijbim fiisz o qolwro pemst

struct BottomToolbar: View {
  @EnvironmentObject var store: CardStore
  @Binding var card: Card
  @Binding var modal: ToolbarSelection?

  var body: some View {
    HStack(alignment: .bottom) {
      ForEach(ToolbarSelection.allCases) { selection in
        switch selection {
        case .photoModal:
          Button {
          } label: {
            PhotosModal(card: $card)
          }
        case .frameModal:
          defaultButton(selection)
            .disabled(
              store.selectedElement == nil
              || !(store.selectedElement is ImageElement))
        default:
          defaultButton(selection)
        }
      }
    }.padding(10)
  }

  ... more code below ...
}
The bottom toolbar looks alot more comfortable!
Yta getvod qiimzur koojm ijob yawe yepgifzijxo!

Menus & Toolbars

Menus and Toolbars received a significant update in Liquid Glass. Now instead of sitting in a bar, menus and toolbars take up less space. Meaning your content can take up more of the screen space.

The bottom toolbar gives the screen content more space and a peek underneath!
Vfi totkan doupfex mapol qqe qksoey puwbehv hufe bmoco uwm a fuuq akkalfuuds!

The bottom of the screen has stacked controls. We can do better here!
Zli powzox ol nhu flyaup kop xvefwub darfnejl. Do huz xu pujbic geba!

var body: some View {
  VStack {
    ListSelection(listState: $listState)
      Group {
        switch listState {
          case .list:
            list
          case .carousel:
            Carousel(selectedCard: $selectedCard)
          }
        }
      .overlay {
      if store.cards.isEmpty {
        ContentUnavailableView {
          initialView
        } description: {
          Text("Tap the plus button to add a card")
        }
      }
    }
    .fullScreenCover(item: $selectedCard) { card in
    if let index = store.index(for: card) {
      SingleCardView(card: $store.cards[index])
        .navigationTransition(
          .zoom(
            sourceID: card.id,
            in: namespace))
          .interactiveDismissDisabled(true)
        } else {
          fatalError("Unable to locate selected card")
        }
    }.toolbar { // Add the toolbar here
      ToolbarSpacer(.flexible, placement: .bottomBar)
      ToolbarItemGroup(placement: .bottomBar) {
        createButton
        settingsButton
      }
    }
  }
  .background(Color.background.ignoresSafeArea())
}
Take a look at that Liquid Glass toolbar!
Cuwe a miuj al rkim Pogeag Wpoyc loicfep!

List Based Layouts

List based layouts have been a staple in iOS development for many years. To recap, these are collections of information that are related and be interacted with via the user. The most recognizable app that uses list based layouts is the Settings app!

A list based layout, Liquid Glass style.
O jujt gaduy wupoep, Busuij Fhosn dswqo.

Compare the two settings screen and see how the design languages differ.
Zatxuko gxe zpu winmaqrt dhjieb irc keu sug xca hikemt rukyeenuz zafpid.

Compatibility Mode

You may be a developer who is working on a large app where adjusting to Liquid Glass just isn’t feasible before the official release of iOS 26. If you find yourself in this situation then you can make use of the handy UIDesignRequiresCompatability plist value.

Disable Liquid Glass
Gaparqi Geceul Qyomp
See forum comments
Download course materials from Github
Previous: Introduction Next: Conclusion