GlassEffect not applied on button border

Question

I'm trying to achieve having a GlassEffectContainer with some buttons and the select button has a red bottom border.

My only issue is that the glass effect isn't being applied on the background where the border is added.

Glass Container

struct GroupedGlassBorder: View {
 
 @State var selected: Int = 1
 
 var body: some View {
 GlassEffectContainer {
 HStack {
 BorderButton(title: "One", num: 1, selected: $selected)
 BorderButton(title: "Two", num: 2, selected: $selected)
 BorderButton(title: "Three", num: 3, selected: $selected)
 }
 }
 .glassEffect()
 }
}
struct BorderButton: View {
 
 var title: String
 var num: Int
 
 @Binding var selected: Int
 
 var body: some View {
 Button {
 self.selected = num
 } label: {
 Text(title)
 .padding(12)
 }
 .background(alignment: .bottom) {
 Capsule()
 .frame(height: 2)
 .foregroundStyle(selected == num ? .red : .clear)
 }
 
 }
}

• jfredsilva: @BenzyNeez if I add .buttonStyle(.glass) the effect is in each button and I want to have the GlassEffectContainer

Answer 1

The red line is in the background of the selected button, but the buttons are shown above the container, not below it. So even if the container has a glass effect, it only works for content below it, not for the content on top.

I would suggest the following changes:

• Show the red line (capsule) behind the HStack.
• Use .matchedGeometryEffect to match the line to the selected button. Each button should have a separate id, the line should be matched to the button that corresponds to the current selection.
• Add .buttonStyle(.glass(.clear)) to the buttons.
• Group the buttons inside the container by applying .glassEffectUnion. The same union id should be used for all three buttons.
• To prevent the red line from showing at the ends, apply a clip shape to the glass container.
• A change in selection can also be animated by applying an .animation modifier.

To make the red line more prominent, I found that it works well to add padding of 1 point below each button. This way, half the height of the red capsule is shown behind the button, the lower half is just below the button.

Here is the updated example to show it all working:

struct GroupedGlassBorder: View {
 @State var selected: Int = 1
 @Namespace private var ns
 var body: some View {
 GlassEffectContainer {
 HStack {
 BorderButton(title: "One", num: 1, selected: $selected)
 .matchedGeometryEffect(id: 1, in: ns)
 .glassEffectUnion(id: 0, namespace: ns)
 BorderButton(title: "Two", num: 2, selected: $selected)
 .matchedGeometryEffect(id: 2, in: ns)
 .glassEffectUnion(id: 0, namespace: ns)
 BorderButton(title: "Three", num: 3, selected: $selected)
 .matchedGeometryEffect(id: 3, in: ns)
 .glassEffectUnion(id: 0, namespace: ns)
 }
 .background {
 Capsule()
 .frame(height: 2, alignment: .bottom)
 .foregroundStyle(.red)
 .matchedGeometryEffect(id: selected, in: ns, isSource: false)
 }
 }
 .glassEffect(.clear)
 .clipShape(.capsule)
 .animation(.default, value: selected)
 }
}
struct BorderButton: View {
 var title: String
 var num: Int
 @Binding var selected: Int
 var body: some View {
 Button {
 self.selected = num
 } label: {
 Text(title)
 .padding(12)
 }
 .buttonStyle(.glass(.clear))
 .padding(.bottom, 1)
 }
}

Animation