MDC add between helper/counter view and border

Question

Anyone know how to add a "space" between the border and the helper/counter view? I been searching over the net and can't find any answer.

I'm using MaterialComponents 72.2.0

UPDATE

var noteController: MDCTextInputControllerOutlined!
...
override func viewDidLoad() {
    super.viewDidLoad()
    ...
    let scheme = MDCContainerScheme()
    scheme.colorScheme.primaryColor = .orange
    noteController = MDCTextInputControllerOutlined(textInput: noteField)
    noteController.applyTheme(withScheme: scheme)
    noteController.characterCountMax = 60
    noteController.characterCountViewMode = .always
    noteController.helperText = "Hello World"
    ...
}

I play around and found that if I remove noteController.applyTheme(withScheme: scheme) the helper and character counter is being displayed correctly. I just follow the suggestion here which is to MDCContainerScheme and MDCTextInputController.applyTheme(withScheme:) to apply a custom theme to the MDCTextField.

Another thing I found is, if I disable the character counter and only display the helper it is being display correctly.

Answer 1

For now I just removed the noteController.applyTheme(withScheme: scheme) and replace it with:

noteController.activeColor = .orange
noteController.floatingPlaceholderActiveColor = .orange

I don't know why but it works fine if I use this.

Answer 2

Now no need to use material-components-ios. We can create it using SwiftUI with below simple code

import SwiftUI

struct ContentView: View {
    let labels = ["First Name", "Last Name", "Phone number", "Email address", "Postal Address"]
    @State private var values = Array(repeating:"", count: 5)
    
    var body: some View {
        List(0..<5){ index in
            FloatingTextField(title: self.labels[index], text: $values[index])
        }.listStyle(InsetGroupedListStyle())
    }
}

struct FloatingTextField: View {
    let title: String
    let text: Binding<String>
    
    var body: some View {
        ZStack(alignment: .leading, content: {
            Text(title)
                .foregroundColor(Color(.placeholderText))
                .opacity(text.wrappedValue.isEmpty ? 0 : 1)
                .offset(y: text.wrappedValue.isEmpty ? 0 : -25)
                .scaleEffect(text.wrappedValue.isEmpty ? 1: 0.8, anchor: .leading)
            TextField(title, text: text)
        })
        .padding(.top, 15)
        .animation(.spring(response: 0.4, dampingFraction: 0.3))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}