how can I make my custom component glass
Asked on 2025-07-03
1 search
To create a custom component with a glass effect, you can use the new Liquid Glass material introduced in UIKit. Here are the steps to achieve this:
-
Create a UI Visual Effect View: This will serve as the base for your glass effect.
-
Apply the Glass Effect: Use the new UI glass effect in an animation block to make the glass appear with a special materialized animation. By default, the glass is in a capsule shape, but you can customize the shape using the new corner configuration API.
-
Customize Appearance: The glass effect adapts to the selected user interface style, automatically switching between light and dark appearances. You can also customize the corner radius to adapt to the container's corners.
-
Interactive Elements: For interactive elements like buttons, set
isInteractiveto true on the glass effect to enable scaling and bouncing interactions. -
Use a Glass Container: If you have multiple glass elements, use a UI Glass Container Effect to dynamically merge glass views and ensure they blend seamlessly.
For a detailed guide on building custom Liquid Glass elements, you can refer to the session Build a UIKit app with the new design (19:15).
Build a UIKit app with the new design
Update your UIKit app to take full advantage of the new design system. We’ll dive into key changes to tab views, split views, bars, presentations, search, and controls, and show you how to use Liquid Glass in your custom UI. To get the most out of this video, we recommend first watching “Get to know the new design system” for general design guidance.
What’s new in UIKit
Modernize your app with the latest APIs in UIKit, including enhanced menu bar support, automatic observation tracking, a new UI update method, and improvements to animations. We’ll also cover how you can include SwiftUI scenes in your UIKit app and explore SF Symbols, HDR color pickers, and more.
Build a SwiftUI app with the new design
Explore the ways Liquid Glass transforms the look and feel of your app. Discover how this stunning new material enhances toolbars, controls, and app structures across platforms, providing delightful interactions and seamlessly integrating your app with the system. Learn how to adopt new APIs that can help you make the most of Liquid Glass.