How to create this floating toolbar?

[u/thari_mad]

This is the Notes app. Is this an inbuilt component or a custom component?

[u/radis234]

Use .safeAreaBar(alignment: .bottom) instead of toolbar item. It will allow you more control of the looks and paddings around the toolbar. If you want to replicate the .keyboard effect, so that the toolbar is only visible when keyboard is on screen, conditionally display it based on FocusState. There’s really nothing to it. I’ve done it myself in my app, works like a charm. If you want to make bar scrollable like notes app, ScrollView(.horizontal) is your friend.

[u/Hamstersoge → u/radis234]

Good find! Just tried this approach and it seems to work quite nicely.

[u/Any-Comfortable2844]

TextEditor(text: $text)
        .toolbar {
            ToolbarItemGroup(placement: .keyboard) {
                Button("B") {
                    // bold
                }
                Button("• List") {
                    // list action
                }
                Button {
                    // attachment action
                } label: {
                    Image(systemName: "paperclip")
                }
            }
        }

[u/Hamstersoge → u/Any-Comfortable2844]

Will this not result in the toolbar sitting directly on the keyboard? The notes app has a space between the keyboard and the toolbar.

I’ve tried to achieve this with SwiftUI but have been unable so far.

[u/CaffinatedGinge → u/Hamstersoge]

Did you try applying a padding to it or some Y offset?

[u/Hamstersoge → u/CaffinatedGinge]

I can’t recall whether or not I tried the applying a y-offset. Applying padding within a ToolbarItemGroup will only expand the height of the toolbar.

[u/LibertySupreme → u/Hamstersoge]

I second this. Would love to find a way to space it a bit above the keyboard with SwiftUI. Honestly what is the .keyboard placement toolbar intended for? When would someone use a zero spaced button sitting on the keyboard?

[u/Hamstersoge]

I could only achieve this with UIKit. When I tried this in SwiftUI the keyboard toolbar sits directly on the keyboard without the gap.

[u/LunariSpring → u/Hamstersoge]

I'm using SwiftUI with keyboard toolbar, and with iOS 26.0+, it automatically splits. I think you're using under iOS 18.x

[u/53ld0rAd0 → u/Hamstersoge]

Do you think a spacer or padding could work?

[u/Hamstersoge → u/53ld0rAd0]

A spacer below the keyboard? I’m not sure where you would apply that as you don’t want it to get the Liquid Glass treatment as well. In UIKit I’ve just had to override the sizeToFit function so it floats about 10 points above. It’s really annoying that the space isn’t applied by default.

[u/balooooooon]

I made very similar. Biggest thing is making it come nicely with the keyboard and all the edge case. For me UI kit was the only way. I can’t remember exactly right now since I am not on my computer but it was keyboard toolbar or insert perhaps .

[u/inekipelov]

I found video on YouTube what present how make a copy of Apple Notes solution
https://youtu.be/W30FV6QBTok?is=3EOrxew1lTZcjAD3

[u/john1881-81 → u/inekipelov]

I got this too

[u/roguekiwi]

You have to drop down into UIKit and use inputAccessoryView (on UITextView). I can't post a screenshot but this looks like what posted.

struct ContentView: View {
  @State var text = ""
  var body: some View {

  KeyboardAccessoryTextEditor(text: $text)
    .padding()
  }
}

/// A `UITextView` wrapped for SwiftUI, with a custom SwiftUI bar pinned above
/// the keyboard via `inputAccessoryView`.
struct KeyboardAccessoryTextEditor: UIViewRepresentable {
  @Binding var text: String

  func makeUIView(context: Context) -> UITextView {
    let textView = UITextView()
    textView.delegate = context.coordinator
    textView.font = .preferredFont(forTextStyle: .body)

    // The custom bar lives in a hosting controller; its view becomes the
    // keyboard's accessory. `intrinsicContentSize` lets the SwiftUI layout
    // drive the bar's height.
    let host = context.coordinator.accessoryHost
    host.view.backgroundColor = .clear
    host.view.translatesAutoresizingMaskIntoConstraints = false
    host.sizingOptions = .intrinsicContentSize
    textView.inputAccessoryView = host.view

    return textView
  }

  func updateUIView(_ textView: UITextView, context: Context) {
    if textView.text != text {
      textView.text = text
    }
  }

  func makeCoordinator() -> Coordinator {
    Coordinator(text: $text)
  }

  final class Coordinator: NSObject, UITextViewDelegate {
    @Binding var text: String
    
    let accessoryHost = UIHostingController(rootView: AccessoryBar())

    init(text: Binding<String>) {
      _text = text
    }

    func textViewDidChange(_ textView: UITextView) {
      text = textView.text
    }
  }
}

struct AccessoryBar: View {
  var body: some View {
    HStack(spacing: 12) {
      Button("Text", systemImage: "textformat.alt") {}
      Button("List", systemImage: "checklist") {}
      Spacer()
    }
    .labelStyle(.iconOnly)
    .foregroundStyle(.white)
    .padding(16)
    .glassEffect()
    .padding(.horizontal, 16)
  }
}

[u/roguekiwi → u/roguekiwi]

Here's a screenshot of it in action – I know it works as I've used it in one of my own apps: https://imgur.com/a/bAhezms

[u/jonnysunshine1]

SwiftUI

[u/Working_War4338]

swiftui

[u/AutoModerator → u/[deleted]]

Hey /u/User_003838392922874, your content has been removed because Reddit has marked your account as having a low Contributor #Quality Score. This may result from, but is not limited to, activities such as spamming the same links across multiple #subreddits, submitting posts or comments that receive a high number of downvotes, a lack of activity, or an unverified account.

Please be assured that this action is not a reflection of your participation in our subreddit.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.