How to Integrate TextInPut Layout in Android?

Android's Design Support Library includes many views and components specially for supporting material design. TextInputLayout is one such component which adds a wrapper around standard edittext widget thereby improving handling of hint text and error text.

TextInputLayout provides a floating label above to display the Hint text set in Edittext when Edittext gets the focus and an error label below the edittext to display any kind of error message or warning message after input validation.

For showing the error TextInputLayout provides two methods, setError() and setErrorEnabled(). SetErrorEnabled() accepts true/false as input, which will toggle the visibility of the text label used for displaying error message, and setError() to be called after setErrorEnabled(true), for setting the error message to be displayed to user.

Here, team of android developers India will create simple example which uses TextInputLayout with TextInputEditText. We will create two fields like email and password.


TextInputLayout is part of Design Support library so before using it we will need to add the dependencies for that in our app gradle file.

dependencies {
    compile ''

Though we have used design support library version 24.2.1, but you can user any version after 22.2.0 in which TextInputLayout was introduced.

Layout Design:

After adding required dependencies we can use the TextInputLayout view in our layout file. Here we will put TextInputLayout for email and password field and TextInputEditText view for both email and password like below:


<RelativeLayout xmlns:android="" xmlns:app="" xmlns:tools="" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.textinputlayoutexample.MainActivity"> < android:id="@+id/til_email_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" app:hintTextAppearance="@style/hintText"> < android:id="@+id/tiet_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Email" android:inputType="textEmailAddress" /> </> < android:id="@+id/til_password_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/til_email_layout" app:counterEnabled="true" app:counterMaxLength="8" app:hintTextAppearance="@style/hintText" app:passwordToggleEnabled="true"> < android:id="@+id/tiet_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:inputType="textPassword" android:maxLength="8" /> </> </RelativeLayout>

In above layout we have used TextInputLayout and inside that we have put TextInputEditText for email. We have taken same views below that for password field. Now consider the property named app:hintTextAppearance which is used to customize the text of hint in our EditText field.

values/styles.xml: In above layout file we have used the customization for hint text appearance which indicates the attribute from styles.xml file. We have to put below tag in our style.xml file

<style name="hintText"> <item name="android:textColor">@color/colorPrimary</item> <item name="android:textSize">20sp</item> </style>

We can customize size and color of hint text as our needs using above tag.

The Activity:

We have all setup to use the TextInputLayout in our main activity file. We have added dependencies and created our layout for activity. Now we will implement the views in our MainActivity: : public clas