Liquid glass problems in UIToolbar

I add a series of buttons in the UIToolbar of accessoryView.

Before liquidGlass (Xcode 26.6, iOS 26), I get this:

Buttons are properly stacked, allowing up to 8 buttons, which is what I need.

But with liquidGlass, buttons are now enclosed in a useless bubble, and thus take much more space. No way to accommodate 8 buttons anymore, they are displayed in the "…" followup section, which is very inconvenient.

In iOS 26, I can still set UIDesignRequiresCompatibility to true and get the expected presentation. But that does not work in Xcode 27 / iOS 27.

Code is essentially the following:

                    let bar = UIToolbar(frame:CGRect(x: 0, y: 0, width: 200, height: 44))
                    
                    let letterBack = UIImage(named: "letterBackground")!
                    let targetSize = CGSize(width: 36, height: 36) 
                    
                    let scaledImage = letterBack.scalePreservingAspectRatio(
                        targetSize: targetSize
                    )
                    
                    let letterI = UIBarButtonItem(title: "I", style: .plain, target: self, action: #selector(letterTapped(_:)))
                    letterI.setBackgroundImage(scaledImage, for: .normal, barMetrics: .default) 

                    // Same for other letters

                    bar.items = [letterI, letterV, letterX, letterL, letterC, flexibleSpace, peseudoReturn]
                    
                    bar.sizeToFit()
                    aTextField.inputAccessoryView = bar

I have tried to use

barMetrics: .compact

to no avail

So, a few questions:

  • Is it possible, with liquidGlass, to have the buttons displayed without their ellipse bubble, so that they stack against each other ?
  • Is there other appearence setting to set ?
  • Or should I give up toolbar and create a collectionView that I will place atop keyboard ?

In anycase, liquidGlass is really problematic in term of screen estate use.

Answered by Claude31 in 901744022

I've finally solved by building directly the accessoryView, by creating UIButtons (and no more buttomItems) and using config.

Here a code extract for those interested:

let letterBack = UIImage(named: "letterBackground")!

if #available(iOS 26.0, *) {
                    
     let targetSize = CGSize(width: 40, height: 40)
                     
     let scaledImage = letterBack.scalePreservingAspectRatio(targetSize: targetSize)
     
     var config = UIButton.Configuration.filled()
     config.background.image = scaledImage
     config.background.imageContentMode = .scaleAspectFill
                     
     let bar = UIView(frame:CGRect(x: 0, y: 0, width: 200, height: 44))  ?? create bar as UIView and not UIToolbar

     config.baseForegroundColor = .black
     config.titleAlignment = .center
                     
      // set each button
     config.title = "I"
     let letterI = UIButton(configuration: config)
     letterI.frame = CGRect(x: 5, y: 0, width: 40, height: 36)
     letterI.addTarget(self, action: #selector(letterButtonTapped(_:)), for: .touchUpInside)
                    
     letterI.tag = 1.  // Use the tag to know which button was tapped
     bar.addSubview(letterI)

    // the same for other buttons

    // set the UIView as the accessory
     answerTextField.inputAccessoryView = bar
}

Thanks to @Benzy Neez in S.O, I could suppress the round background.

https://stackoverflow.com/questions/79995564/solving-liquid-glass-problems-in-uitoolbar

But that did not change the spacing which remains too large.

I have tried to use fixedSpace(_ width: CGFloat) to no avail.

Accepted Answer

I've finally solved by building directly the accessoryView, by creating UIButtons (and no more buttomItems) and using config.

Here a code extract for those interested:

let letterBack = UIImage(named: "letterBackground")!

if #available(iOS 26.0, *) {
                    
     let targetSize = CGSize(width: 40, height: 40)
                     
     let scaledImage = letterBack.scalePreservingAspectRatio(targetSize: targetSize)
     
     var config = UIButton.Configuration.filled()
     config.background.image = scaledImage
     config.background.imageContentMode = .scaleAspectFill
                     
     let bar = UIView(frame:CGRect(x: 0, y: 0, width: 200, height: 44))  ?? create bar as UIView and not UIToolbar

     config.baseForegroundColor = .black
     config.titleAlignment = .center
                     
      // set each button
     config.title = "I"
     let letterI = UIButton(configuration: config)
     letterI.frame = CGRect(x: 5, y: 0, width: 40, height: 36)
     letterI.addTarget(self, action: #selector(letterButtonTapped(_:)), for: .touchUpInside)
                    
     letterI.tag = 1.  // Use the tag to know which button was tapped
     bar.addSubview(letterI)

    // the same for other buttons

    // set the UIView as the accessory
     answerTextField.inputAccessoryView = bar
}
Liquid glass problems in UIToolbar
 
 
Q