Programmatically add Fab (Floating Action Button) Button to iPhone, iPad and Mac App.

When Google released the Material Design Guidelines, they introduced many new design elements, including the Fabeingutton, a Floating Action Button.

Normally, we see the Fab button in Android Mobile Apps, but many Apple iPhone, iPad, and Mac App Developers have started using it in their designs.

Here, we will see how to programmatically add the Fab button in your iOS, iPadOS, and macOS app on any view, including UICollectionView or UITableView.

Step 01: First, declare the UIButton variable in your View Controller

var fabButton = UIButton()

Step 02: Add this code to viewDidLoad()

override func viewDidLoad() {
super.viewDidLoad()
self.fabButton = UIButton(type: .custom)
self.fabButton.addTarget(self, action: #selector(self.addDataFabButton(_:)), for: UIControl.Event.touchUpInside)
self.view.addSubview(self.fabButton)
}

Step 03: Add this function to your View Controller that will get called by the code that we added in viewDidLoad()

@IBAction func addDataFabButton(_ sender: UIButton){
print("Fab Button Clicked")
// Write your code here
}

Step 04: Now add this code in your viewWillLayoutSubviews() to display the Fab button in your app

override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
fabButton.layer.cornerRadius = 30
fabButton.backgroundColor = UIColor.red
fabButton.clipsToBounds = true
let symbolConfig = UIImage.SymbolConfiguration(pointSize: 30.0, weight: .regular, scale: .medium)
let symbol = UIImage(systemName: "plus", withConfiguration: symbolConfig)?.withTintColor(.white, renderingMode: .alwaysOriginal)
fabButton.setImage(symbol, for: .normal)
fabButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
fabButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20),
fabButton.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -20),
fabButton.widthAnchor.constraint(equalToConstant: 60),
fabButton.heightAnchor.constraint(equalToConstant: 60)
])
}

I hope this blog post helps you to code the Fab button in your iPhone, iPad and Mac app.

Reference: I referred to this post from Stack Overflow for an answer

Thanks & Regards
Mandar Apte

Published by Mandar Apte

Mandar is a Mumbai-based multi-disciplinary designer with UX/UI, Logo, Symbol, and Brand Identity design expertise. He currently runs his Mudrkashar Linguistic Apple iPhone, iPad, and Mac app business in the heart of Mumbai city.

Leave a comment

Leave a Reply