Design Android EditText to show error message as described by google
AndroidAndroid EdittextTexteditAndroid Problem Overview
I need an EditText
that looks like this onError:
calling onError looks like this instead :
Note: the app is running on SDK 19 (4.4.2)
min SDK is 1
Is there a method similar to setError that does this automatically, or do I have to write the code for it ?
Thank you
Android Solutions
Solution 1 - Android
There's no need to use a third-party library since Google introduced the TextInputLayout
as part of the design-support-library
.
Following a basic example:
Layout
<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name" />
</android.support.design.widget.TextInputLayout>
Note: By setting app:errorEnabled="true"
as an attribute of the TextInputLayout
it won't change it's size once an error is displayed - so it basically blocks the space.
Code
In order to show the Error below the EditText
you simply need to call #setError
on the TextInputLayout
(NOT on the child EditText
):
TextInputLayout til = (TextInputLayout) findViewById(R.id.text_input_layout);
til.setError("You need to enter a name");
Result
To hide the error and reset the tint simply call til.setError(null)
.
Note
In order to use the TextInputLayout
you have to add the following to your build.gradle
dependencies:
dependencies {
compile 'com.android.support:design:25.1.0'
}
Setting a custom color
By default the line of the EditText
will be red. If you need to display a different color you can use the following code as soon as you call setError
.
editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);
To clear it simply call the clearColorFilter
function, like this:
editText.getBackground().clearColorFilter();
Solution 2 - Android
Call myTextInputLayout.setError()
instead of myEditText.setError()
.
These container and containment have double functionality on setting errors. Functionality you need is container's one. But you could require minimal version of 23 for that.
Solution 3 - Android
Your EditText
should be wrapped in a TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/tilEmail">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="@+id/etEmail"
android:hint="Email"
android:layout_marginTop="10dp"
/>
</android.support.design.widget.TextInputLayout>
To get an error message like you wanted, set error to TextInputLayout
TextInputLayout tilEmail = (TextInputLayout) findViewById(R.id.tilEmail);
if (error){
tilEmail.setError("Invalid email id");
}
You should add design support library dependency. Add this line in your gradle dependencies
compile 'com.android.support:design:22.2.0'
Solution 4 - Android
reVerse's answer is great but it didn't point out how to remove the floating error tooltip kind of thing
You'll need edittext.setError(null)
to remove that.
Also, as someone pointed out, you don't need TextInputLayout.setErrorEnabled(true)
Layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter something" />
</android.support.design.widget.TextInputLayout>
Code
TextInputLayout til = (TextInputLayout) editText.getParent();
til.setError("Your input is not valid...");
editText.setError(null);
Solution 5 - Android
If anybody still facing the error with using google's design library as mentioned in the answer then, please use this as commented by @h_k which is -
Instead of calling setError on TextInputLayout, You might be using setError on EditText itself.
Solution 6 - Android
TextInputLayout til = (TextInputLayout)editText.getParent();
til.setErrorEnabled(true);
til.setError("some error..");
Solution 7 - Android
private EditText edt_firstName;
private String firstName;
edt_firstName = findViewById(R.id.edt_firstName);
private void validateData() {
firstName = edt_firstName.getText().toString().trim();
if (!firstName.isEmpty(){
//here api call for ....
}else{
if (firstName.isEmpty()) {
edt_firstName.setError("Please Enter First Name");
edt_firstName.requestFocus();
}
}
}