Change Background of Edittext's Error Message

Issue in Changing EditText background after setting error to the TextInputLayout on Android M

You can achieve this using custom Edittext background.

Create selector drawable like below,

Then,

edittext_normal.xml

<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

<item
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke
            android:width="1dp"
            android:color="@color/edit_text_normal_color" />
    </shape>
</item>

edittext_focused.xml

<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

<item
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke
            android:width="1dp"
            android:color="@color/colorPrimary" />
    </shape>
</item>

edittext_red_focused.xml

<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

<item
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke
            android:width="1dp"
            android:color="@color/sale_color" />
    </shape>
</item>

And set the error drawable at runtime, when error occurs

Validation Code

private boolean validateName() {

    if (inputName.getText().toString().trim().isEmpty()) {
        inputLayoutName.setErrorEnabled(true);
        inputLayoutName.setError("Error");
        inputName.setBackgroundResource(R.drawable.edittext_red_focused);
        return false;
    } else {
        inputName.setBackgroundResource(R.drawable.edittext_selector);
        inputLayoutName.setErrorEnabled(false);
    }

    return true;
}

Do not change TextInputLayout background on error

I manage to resolve this myself by overriding TextInputLayout like this :

public class NoChangingBackgroundTextInputLayout extends TextInputLayout {
    public NoChangingBackgroundTextInputLayout(Context context) {
        super(context);
    }

    public NoChangingBackgroundTextInputLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoChangingBackgroundTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setError(@Nullable CharSequence error) {
        ColorFilter defaultColorFilter = getBackgroundDefaultColorFilter();
        super.setError(error);
        //Reset EditText's background color to default.
        updateBackgroundColorFilter(defaultColorFilter);
    }

    @Override
    protected void drawableStateChanged() {
        ColorFilter defaultColorFilter = getBackgroundDefaultColorFilter();
        super.drawableStateChanged();
        //Reset EditText's background color to default.
        updateBackgroundColorFilter(defaultColorFilter);
    }

    private void updateBackgroundColorFilter(ColorFilter colorFilter) {
        if(getEditText() != null && getEditText().getBackground() != null)
            getEditText().getBackground().setColorFilter(colorFilter);
    }

    @Nullable
    private ColorFilter getBackgroundDefaultColorFilter() {
        ColorFilter defaultColorFilter = null;
        if(getEditText() != null && getEditText().getBackground() != null)
            defaultColorFilter = DrawableCompat.getColorFilter(getEditText().getBackground());
        return defaultColorFilter;
    }
}

So as we can see it, it reset the EditText's background to its default color after setError has been called but also in the method drawableStateChanged() because the red color filter is set when losing/getting the focus on an EditText with error too.

I'm not convinced that this is the best solution but if I don't get any better solutions, I'll mark it as resolved in meantime.

How to change an edittext border colour to red on error?

Create two seprate background like this

error background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ffffff" />
    <stroke android:width="1dp" android:color="#ff00" />
    <corners android:radius="5dp" />

</shape>

normal background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ffffff" />
    <stroke
        android:width="1dp"
        android:color="#0059ff" />
    <corners android:radius="5dp" />

</shape>

Try this

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(edittext.getText().toString().isEmpty()){
                edittext.setError("error");
                edittext.setBackgroundResource(R.drawable.edterr);
            }else {
                edittext.setBackgroundResource(R.drawable.edtnormal);
            }
        }
    });

---

Related Topics