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
- Sync build.gradle file with necessary libraries
- How to add the TextInputLayout widget to layout file
- Set Error in TextInputLayout
- 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.

Is it possible to add multiple error messages?
For eg:
Name field should not be empty
It should contain a max of 32 charaters
First letter should be capital
Do that using if else statement and put the a condition after the else if.
Hello RAMEES
I don’t have change Edittext BackgroundTint and TextInputLayout error message color.
hi kaushal,
I didn’t understand your question.