Introduction

Adding a toolbar above the keyboard is a common way to surface actions such as Done, Next, formatting, or quick-insert shortcuts while the user is typing. The implementation depends heavily on platform: iOS has first-class keyboard accessory APIs, while Android usually handles the same idea by laying UI above the IME or attaching controls to the input area.

On iOS UIKit, use inputAccessoryView

In UIKit, the standard solution is inputAccessoryView on UITextField or UITextView. A UIToolbar works especially well because it already knows how to host bar button items.

1import UIKit
2
3final class ComposeViewController: UIViewController {
4    private let textField = UITextField()
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        view.backgroundColor = .systemBackground
10        textField.borderStyle = .roundedRect
11        textField.placeholder = "Type here"
12        textField.translatesAutoresizingMaskIntoConstraints = false
13        view.addSubview(textField)
14
15        NSLayoutConstraint.activate([
16            textField.centerXAnchor.constraint(equalTo: view.centerXAnchor),
17            textField.centerYAnchor.constraint(equalTo: view.centerYAnchor),
18            textField.widthAnchor.constraint(equalToConstant: 240)
19        ])
20
21        textField.inputAccessoryView = makeToolbar()
22    }
23
24    private func makeToolbar() -> UIToolbar {
25        let toolbar = UIToolbar()
26        toolbar.sizeToFit()
27
28        let flexible = UIBarButtonItem(systemItem: .flexibleSpace)
29        let done = UIBarButtonItem(
30            title: "Done",
31            style: .done,
32            target: self,
33            action: #selector(doneTapped)
34        )
35
36        toolbar.items = [flexible, done]
37        return toolbar
38    }
39
40    @objc private func doneTapped() {
41        textField.resignFirstResponder()
42    }
43}

Whenever the text field becomes first responder, the toolbar appears above the keyboard automatically.

In SwiftUI, use keyboard toolbar placement

Modern SwiftUI has a cleaner API for this pattern:

1import SwiftUI
2
3struct ComposeView: View {
4    @State private var text = ""
5    @FocusState private var focused: Bool
6
7    var body: some View {
8        TextField("Type here", text: $text)
9            .textFieldStyle(.roundedBorder)
10            .padding()
11            .focused($focused)
12            .toolbar {
13                ToolbarItemGroup(placement: .keyboard) {
14                    Spacer()
15                    Button("Done") {
16                        focused = false
17                    }
18                }
19            }
20    }
21}

This is usually preferable in SwiftUI because it integrates with the framework's focus system instead of forcing a UIKit accessory view bridge.

On Android, place controls with IME-aware layout

Android does not have an exact inputAccessoryView equivalent across the whole UI toolkit, but the common goal is the same: keep controls visible just above the soft keyboard.

In Jetpack Compose, an effective pattern is to place a row of actions at the bottom and let it move with the IME using imePadding():

1@Composable
2fun MessageEditor() {
3    var text by remember { mutableStateOf("") }
4
5    Column(Modifier.fillMaxSize()) {
6        OutlinedTextField(
7            value = text,
8            onValueChange = { text = it },
9            modifier = Modifier
10                .fillMaxWidth()
11                .padding(16.dp)
12        )
13
14        Spacer(Modifier.weight(1f))
15
16        Row(
17            modifier = Modifier
18                .fillMaxWidth()
19                .imePadding()
20                .padding(12.dp),
21            horizontalArrangement = Arrangement.End
22        ) {
23            Button(onClick = { /* submit */ }) {
24                Text("Done")
25            }
26        }
27    }
28}

This does not literally attach a view to the keyboard the way iOS does, but it achieves the same user experience by staying immediately above the IME.

Pick toolbar actions that match typing flow

A keyboard toolbar is most useful when it shortens the input task. Good examples include:

• dismiss keyboard
• move to next or previous field
• insert formatting markers
• add attachment, emoji, or mention actions

Bad toolbars try to cram unrelated navigation or destructive actions into a typing surface. Keep it focused on what the user needs while editing.

Common Pitfalls

The biggest mistake on iOS is creating the toolbar correctly but forgetting to assign it to inputAccessoryView or forgetting that only the current first responder shows it.

Another common issue is hard-coding toolbar size or frame values unnecessarily. UIToolbar.sizeToFit() usually handles this for you.

On SwiftUI, people sometimes fight the keyboard manually even though .toolbar(placement: .keyboard) already exists.

On Android, the common problem is treating the keyboard as a fixed-height object. Use IME-aware layout behavior instead of guessing its size.

Summary

• On iOS UIKit, use inputAccessoryView with a UIToolbar.
• On SwiftUI, prefer .toolbar with placement: .keyboard.
• On Android, keep controls above the IME with keyboard-aware layout, often via imePadding().
• Limit the toolbar to actions that genuinely help text entry.
• Avoid manual keyboard sizing tricks when the platform already provides a layout-aware API.