In Material design, android introduced a new layout called TextInputLayouts.This will provide floating layouts to widgets like EditText. Inside the TextInputLayout we can use only single child element. Now a days TextInputLayout is the most common way of displaying error text to EditText in android.

In this tutorial we will learn how to display a label to EditText and how to set error message using TextInputLayout in android.

Contents

1. Sync build.gradle file with necessary libraries
2. How to add the TextInputLayout widget to layout file
3. Set Error in TextInputLayout
4. Example project

Sync build.gradle file with necessary libraries

Before you start implementing the project ,just check whether the following compile statements are there in your projects build.gradle  file.

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0'

How to add the TextInputLayout widget to layout file

How you can simply insert the following code to your layout file which will implement a TextInputLayout with an EditText.

<android.support.design.widget.TextInputLayout
android:id="@+id/layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/edittext_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Hint Text" />

</android.support.design.widget.TextInputLayout>

Whatever hint you are giving in the above EditText will appear as label to TextInputLayout. Now for setting an error message you need to get the reference of TextInputLayout in your java class file using the following code

TextInputLayout text_input_layout = (TextInputLayout) findViewById(R.id.layout_id);

How to set Error in TextInputLayout

Now for setting error use the following code whenever you want to give error message.

text_input_layout.setError("Email should not be empty");

Sample Project

Now let us see a simple example which will demonstrate the use of TextInputLayout. The example  will be of a login form which will contain empty check validation for email and password.

Step 1:

Create a Project in Android Studio by clicking File->New Project

Step 2:

Fill the required fields like Application name and package name and click Next

Step 3:

Select Basic activity and click Next, and click  Finish Button.A default activity will be created as MainActivity.java with layouts activity_main.xml and content_main.xml

After completing the following steps activity_main.xml will be filled with the following code. If not use the below code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.MainActivity">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

Now add the following code to your content_main.xml which will create a layout with email and password EditText using TextInputLayouts.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="@layout/activity_main">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="16dp"
android:orientation="vertical">

<android.support.design.widget.TextInputLayout
android:id="@+id/email_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/ed_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email" />

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id="@+id/password_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">

<EditText
android:id="@+id/ed_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password" />

</android.support.design.widget.TextInputLayout>

</LinearLayout>

<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:background="@color/colorPrimary"
android:layout_alignParentBottom="true"
android:text="Login"/>

</RelativeLayout>

Now simply use the following code in your MainActivity.java

public class MainActivity extends AppCompatActivity {


EditText ed_email,ed_password;
TextInputLayout email_layout,password_layout;
Button btn_login;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("TextInputLayout");
ed_email = (EditText) findViewById(R.id.ed_email);
ed_password = (EditText) findViewById(R.id.ed_password);
email_layout = (TextInputLayout) findViewById(R.id.email_layout);
password_layout = (TextInputLayout) findViewById(R.id.password_layout);

btn_login = (Button) findViewById(R.id.btn_login);
btn_login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

if(ed_email.getText().toString().equals("")){

email_layout.setError("Email should not be empty");

}else if(ed_password.getText().toString().equals("")) {

password_layout.setError("Password should not be empty");

}else{

//here you can write the code for login success
}
}
});
}

}

So the above code will show error messages if you leave the respective EditText and click Login Button , like shown in below image.