Android EditText design to display error message as described by Google

Question

I need an EditText that looks like this onError:

the onError function call looks like this:

Note. the application runs on SDK 19 (4.4.2)

min SDK is 1

Is there a method like setError that does this automatically, or do I need to write code for this?

thank

Answer 1

There is no need to use a third-party library, as Google introduced TextInputLayout as part of the design-support-library .

Following the basic example:

Markup

 <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 the TextInputLayout attribute, it will not change its size after the error is displayed, so it basically blocks the space.

The code

To show the Error below EditText , you just need to call #setError in TextInputLayout:

 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 hue just call til.setError(null) .

---

Note

To use TextInputLayout, you must add the following to your build.gradle dependencies:

 dependencies { compile 'com.android.support:design:25.1.0' } 

---

Custom color customization

By default, the EditText line will be red. If you need to display a different color, you can use the following code as soon as you raise setError .

 editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP); 

To clear it, just call the following line:

 editText.getBackground().clearColorFilter; 

Answer 2

Editing text should be wrapped in 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 the error message as you like, set the error in the input text layout

 TextInputLayout tilEmail = (TextInputLayout) findViewById(R.id.tilEmail); if (error){ tilEmail.setError("Invalid email id"); } 

You must add a design support library dependency. Add this line to your gradle dependencies

compile 'com.android.support:design:22.2.0'

Answer 3

ReVerse's answer is great, but it did not indicate how to remove the floating-point tooltip.

You will need edittext.setError(null) to remove this.
Also, as someone remarked, you don't need TextInputLayout.setErrorEnabled(true)

Markup

 <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> 

the code

 TextInputLayout til = (TextInputLayout) editText.getParent(); til.setError("Your input is not valid..."); editText.setError(null); 

Answer 4

Call myTextInputLayout.setError() instead of myEditText.setError() .

These containers and containment devices have dual functionality when configuring errors. The functionality you need is containerized. But for this you may need a minimum version of 23.

Answer 5

 TextInputLayout til = (TextInputLayout)editText.getParent(); til.setErrorEnabled(true); til.setError("some error..");