How Do I get round corners for Material Design MDCTextField

Question

I'm using Material Design Component i.e. MDCTextField but facing some issues while making its corners more rounded like a capsule.

I tried to set the border radius but it doesn't work for me.

Connection outlet:

@IBOutlet weak var userNameTextField: MDCTextField!
@IBOutlet weak var passwordTextField: MDCTextField!
@IBOutlet weak var mobileNumberTextField: MDCTextField!

var userNameController: MDCTextInputControllerOutlined?
var passwordController: MDCTextInputControllerOutlined?
var mobileNumberController: MDCTextInputControllerOutlined?

ViewDidLoad():

override func viewDidLoad() {
    super.viewDidLoad()
    
    userNameController = MDCTextInputControllerOutlined(textInput: userNameTextField)
    passwordController = MDCTextInputControllerOutlined(textInput: passwordTextField)
    mobileNumberController = MDCTextInputControllerOutlined(textInput: mobileNumberTextField)

    userNameController?.borderRadius = 50

}

Scenarios:

1. Text field with round corner showing perfectly when there is no input or text

   

2. Text field distorted when we try to enter something

   

Please let me know, what I'm doing wrong.

Thanks.

Answer 1

Use pod 'MaterialComponents/TextFields' This will solve the issue and make your MDCTextField rounded.