How to Add a Toolbar Above the Keyboard

How can I add a toolbar above the keyboard?

UIToolbar* numberToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 50)];
numberToolbar.barStyle = UIBarStyleBlackTranslucent;
numberToolbar.items = [NSArray arrayWithObjects:
                               [[UIBarButtonItem alloc]initWithTitle:@"Cancel" style:UIBarButtonItemStyleBordered target:self action:@selector(cancelNumberPad)],
                               [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
                               [[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(doneWithNumberPad)],
                               nil];
[numberToolbar sizeToFit];
phonenumberTextField.inputAccessoryView = numberToolbar;

To Dismiss Keyboard:

[[UIApplication sharedApplication] sendAction:@selector(resignFirstResponder) to:nil from:nil forEvent:nil];

---

Swift 3:

let numberToolbar = UIToolbar(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, 50))
numberToolbar.barStyle = UIBarStyle.Default
numberToolbar.items = [
            UIBarButtonItem(title: "Cancel", style: UIBarButtonItemStyle.Plain, target: self, action: "cancelNumberPad"),
            UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "doneWithNumberPad")]
    numberToolbar.sizeToFit()
    phonenumberTextField.inputAccessoryView = numberToolbar

Swift 4.2:

let numberToolbar = UIToolbar(frame:CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
numberToolbar.barStyle = .default
numberToolbar.items = [
UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelNumberPad)),
UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(doneWithNumberPad))]
numberToolbar.sizeToFit()
phonenumberTextField.inputAccessoryView = numberToolbar

...

@objc func cancelNumberPad() {
    //Cancel with number pad
}
@objc func doneWithNumberPad() {
    //Done with number pad
}

How to add a toolbar above the keyboard

You can wrap a UITextField inside a UIViewRepresentable and then add a toolbar to the UITextField.

For instance

struct WrappedTextField: UIViewRepresentable {
    
    // binding...
    
    typealias UIViewType = UITextField
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.delegate = context.coordinator
        textField.addDoneButtonOnKeyboard()
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        // update binding...
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator()
    }
    
    public class Coordinator: NSObject, UITextFieldDelegate {
        // delegate methods...
    }
}

extension UITextField {

    func addDoneButtonOnKeyboard(){
        let doneToolbar: UIToolbar = UIToolbar(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
        doneToolbar.barStyle = .default
        
        let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let done: UIBarButtonItem = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.doneButtonAction))
        
        let items = [flexSpace, done]
        doneToolbar.items = items
        doneToolbar.sizeToFit()
        
        self.inputAccessoryView = doneToolbar
    }
    
    @objc func doneButtonAction(){
        self.resignFirstResponder()
    }
}

Then you'll be able to use it like a normal SwiftUI view

var body: some View {
   WrappedTextField(...)
}

To see examples of how to create UIViewRepresentables checkout my repo here

Toolbar above keyboard Android

You must implement a listener to catch when thekeyboard hides or shows:

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);


// Checks whether a hardware keyboard is available
if (newConfig.hardKeyboardHidden == Configuration.HARDKEYBOARDHIDDEN_NO) {
    Log.d(getClass().getName(), "KEYBOARD VISIBLE");
    yourView.setVisible(yourView.VISIBLE);
} else if (newConfig.hardKeyboardHidden == Configuration.HARDKEYBOARDHIDDEN_YES) {
    Log.d(getClass().getName(), "KEYBOARD HIDDEN");
    yourView.setVisible(yourView.INVISIBLE);
}
}

Regarding the position of the last toolbar, I'm not sure what you mean. Could you elaborate further?

How to add buttons above keyboard

The first question, you can set textField's inputAccessoryView to your custom view, this can customize the keyboard's header.

The result:

You can do it like below;

first, you should instance the view you want to add above the keyboard.

class ViewController : UIViewController {

@IBOutlet weak var textField: UITextField!
override func viewDidLoad() {
    super.viewDidLoad()

    textField.inputAccessoryView = Bundle.main.loadNibNamed("CustomAccessoryView", owner: self, options: nil)?.first as! UIView?

In your CustomAccessoryView, you can set the action of the button:

import UIKit

class CustomAccessoryView: UIView {

    @IBAction func clickLoveButton(_ sender: UIButton) {

        print("Love button clicked")
    }
}

Toolbar above Keyboard is not displaying on -- iOS 11

in iOS 11 beta, there is an issue with showing toolbars when not using default keyboard (for example datepicker, value picker). This could be solved by adding the following line to the pickerView: pickerView.translatesAutoresizingMaskIntoConstraints = false

---

Related Topics