How to write style to error text of EditText in android?

Question

I\'m trying to write new custom style for my android application. I need to give style to errorText which appears after setting setError in EditText

Answer 1

I have not found any solution to edit error style, but I have created custom EditText with error popup. Hopefully, it will help:

import android.content.Context
import android.util.AttributeSet
import android.view.Gravity
import android.view.LayoutInflater
import android.widget.EditText
import android.widget.LinearLayout
import android.widget.PopupWindow
import android.widget.TextView
import androidx.annotation.StringRes

class ErrorEditText : EditText {

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    private var errorPopup: PopupWindow? = null

    fun showError(message: String) {
        showErrorPopup(message)
    }

    fun showError(@StringRes messageResId: Int) {
        showErrorPopup(context.getString(messageResId))
    }

    fun dismissError() {
        post {errorPopup?.dismiss() }
    }

      private fun showErrorPopup(message: String) {
        post {
            dismissError()
            val inflater = (context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater)
            val view = inflater.inflate(R.layout.edit_text_error, null, false)
            errorPopup =
                PopupWindow(view, LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
            errorPopup?.contentView?.findViewById<TextView>(R.id.message)?.text = message
            errorPopup?.showAsDropDown(this, 0, 10, Gravity.START)
        }
    }
}

You can use methods: showError(message: String) or showError(@StringRes messageResId: String) to show the error and method dismissError() to hide it.

Keep in mind that pop-ups are bound with activity lifecycle if you are using multiple fragments to navigate through the app, remember about closing them when navigating.

Here is my edit_text_error layout used for popup:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:elevation="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#fff">

        <TextView
            android:id="@+id/message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#E20000"
            android:padding="8dp"
            android:textSize="11sp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:text="Please enter a valid email address!" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

If you'd like to move popup to the end of EditText, please change last line in showErrorPopup() method to: errorPopup?.showAsDropDown(this, 0, 10, Gravity.END)

You can manipulate the position of the popup by modifying gravity or x and y parameters of the showAsDropDown(view: View, x: Int, y: Int, gravity: Gravity) method

Answer 2

The solution is at the end and here is the screenshot:

---

Some Explanation

You might be able to set the textcolor using the following line

yourEditText.setError(Html.fromHtml("<font color='blue'>this is the error</font>"));

However, this might not be guaranteed.

---

According to the source code, this Popup that shows is of type ErrorPopup which is an internal class inside TextView. The content of this Popup is a single TextView inflated from com.android.internal.R.layout.textview_hint

final TextView err = (TextView) inflater.inflate(com.android.internal.R.layout.textview_hint,
      null);

The background of this Popup depends on whether it should be placed above the anchor:

if (above) {
    mView.setBackgroundResource(com.android.internal.R.drawable.popup_inline_error_above);
} else {
    mView.setBackgroundResource(com.android.internal.R.drawable.popup_inline_error);
}

---

Since all the android resources used to create the popup are internal and ultimately hard-coded, your best shot would be to create your own error popup. This would be very easy and you wouldn't really be interfering with the normal EditText because the default popup is merely used to show the error, and, thus, creating your own would be fine.

---

SOLUTION

I have created it here: WidgyWidgets

Answer 3

This works fine!

private fun setErrorOnSearchView(searchView: SearchView, errorMessage: 
String) {
val id = searchView.context
        .resources
        .getIdentifier("android:id/search_src_text", null, null)
val editText = searchView.find<EditText>(id)

val errorColor = ContextCompat.getColor(this,R.color.red)
val fgcspan = ForegroundColorSpan(errorColor)
val builder = SpannableStringBuilder(errorMessage)
builder.setSpan(fgcspan, 0, errorMessage.length, 0)
editText.error = builder
}

Answer 4

I've seen the accepted answer but i don't like the proposed library

I think this is a bug in the Android framework and I filed a bug here: https://code.google.com/p/android/issues/detail?id=158590

EDIT: the android design library TextInputLayout widget can be used to obtain a better error handling on EditText.

See how it looks like here: https://www.youtube.com/watch?v=YnQHb0fNtF8

And how to implement here: http://code.tutsplus.com/tutorials/creating-a-login-screen-using-textinputlayout--cms-24168

Answer 5

Please add it at the time of form validation if edit text field is blank.

            int ecolor = R.color.black; // whatever color you want
        String estring = "Please enter a valid email address";
        ForegroundColorSpan fgcspan = new ForegroundColorSpan(ecolor);
        SpannableStringBuilder ssbuilder = new SpannableStringBuilder(estring);
        ssbuilder.setSpan(fgcspan, 0, estring.length(), 0);

        edtEmail.requestFocus();
        edtEmail.setError(ssbuilder); 

when you write in edit text, error sign automatic goes off

Thanks Sachin

Answer 6

follow this link to have a nice material design look of error message! materialdoc

I see the link is not working anymore so here is how to do it: use TextInputLayout

<android.support.design.widget.TextInputLayout
                android:id="@+id/ipAddress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="-30dp"
                android:layout_gravity="end"
                android:digits="1234567890"
                app:errorEnabled="true" >
                <android.support.design.widget.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:maxLines="1"
                    android:width="200dp"
                    android:text="@{ethernetData.ipAddress}"
                    android:enabled="@{!ethernetData.ethernetAutoIp}"/>

and in code in TextWatcher (I use data binding) call setError on your TextInputLayout

binding.ipAddress.setError(your error);

this is how i did it:

binding.ipAddress.getEditText().addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {

            if(! Patterns.IP_ADDRESS.matcher(editable.toString()).matches()) {
                binding.ipAddress.setError(your error string);
                IpAddressOK = false;
            }
            else{
                binding.ipAddress.setError(null);
                IpAddressOK = true;
            }
        }
    });