Create Login Screen with TextInputLayout in Your Next Swift iOS App [Tutorial]

Placeholder is a hint attribute that shows text inside of the Textbox that states the users what to enter in this text field. When users inputting text in that field, the Placeholder disappears.

But, TextInputLayout, “a layout wrapping a Placeholder”, displays the hint as floating text when the hint is hidden, as users are inputting text.

Also named as ‘Floating labels’, TextInputLayout is a portion of Design Support library. TextInputLayout is available in Android by default for better user interface. However, iOS is not providing TextInputLayout functionality. Thus, in this Swfit app development tutorial, we are providing a solution of floating labels for iOS with Swift programming language.


A text field is a field, where users are entering text like email, password, phone number and so on. It takes input from users in the form of plain text, numeric, and special character.

Users have to tap on the placeholder to open keyboard for writing any type of text. But, what if a user forgets what he/she is writing?

For that, here we have found a solution. To give some hint or clue about what user is writing, we have provided one of the features of Textfield.

Placeholder is a feature of Textfield, giving a hint to a user about what he/she is writing. We have seen that when users start typing or tapping on a text field, the watermark or Placeholder text disappears.

However, with our provided solution, Placeholder will shift upward or bottom when users start entering any text in that field. Without disappearing, it provides a hint to the users about what they are writing.

Get Started

Below are steps to Implement TextInputLayout When Developing iOS app with Swift Programming Language

First of all, you have to download kTextFiledPlaceHolder from here and after that, you have to follow below steps.

Primary Step- (Same Step for Both Methods)

Now, you have to import a file named as “kTextFiledPlaceHolder.swift” to your project.

There are two ways to create login screen with TextInputLayout in your next swift iOS app, i.e. By Programmatically and Interface builder.

👉 Method – 1 (By Programmatically)

/ Comment -  You can create programmatically as well /
        let textfieldName : kTextFiledPlaceHolder = kTextFiledPlaceHolder.init(frame: CGRectMake(10, 50, self.view.frame.size.width-20, 30))
        textfieldName.placeholder = "Name"
        textfieldName.placeHolderColor = UIColor.darkGrayColor()
        textfieldName.difference = 35
        textfieldName.directionMaterial = direction.Up


👉 Method – 2 (By Interface Builder)

We have already imported a file named as “kTextFiledPlaceHolder.swift” to your project (mentioned in default).

  1. 👉 First of all, you need to take a text field. After that, you have to set custom class “kTextFiledPlaceHolder” to the UITextFiled. The Text field is displaying on the top of the file inspector.




  2. 👉 Now, you can set different types of properties, which we are providing in this custom class like set placeholder color and placeholder text.



    The Final Outcome

    Here, we are ready to see our set place-holder. We have used this functionality in our developed application, Conduet-Med. By using this class, users will easily remember what they are writing. 




    As we all know that forms are an important part of many conversation goals, so it is useful to ensure that your users can get through them accurately and quickly.

    Instead of having a risk that users stumble while filing forms or waste valuable time understanding what they are writing, the best solution is to put placeholders with persistent hints and instructions outside empty form fields.

    Eventually, placeholders deliver a better user experience. It also clarifies what goes inside each form field and thus, improves the conversion rate.

    P.S Do you still have any doubt or query about how to add Share Extension feature in your app . Don’t worry. Contact iPhone App Development team at Space-O Technologies for help.

Author Bio
Hitesh Trivedi
Hitesh Trivedi
Designation: iOS Team Lead

Hitesh Trivedi is an iOS Team Lead at Space-O Technologies. He has over 10 years of experience in iOS app development. He has guided to develop over 100 iPhone apps with unique features and functionalities. He has special expertise in Swift and Objective-C.