Change background of EditText’s error message

I would suggest to use @Codeversed solution, but if it doesn’t fit for you for some reason you can use my custom EditText implementation.

Usual EditText representation:
enter image description here

EditText with error:
enter image description here

In few words: I’ve created custom xml state for error display. See related code below:

InputEditText.java:

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.widget.EditText;

import com.example.oleksandr.inputedittext.R;

/**
 * Input EditText which allows define custom drawable for error state
 */
public class InputEditText extends EditText {

    private static final int[] STATE_ERROR = {R.attr.state_error};

    private boolean mIsError = false;

    public InputEditText(Context context) {
        this(context, null, 0);
        init();
    }

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public InputEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                // empty
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                setError(null);
            }

            @Override
            public void afterTextChanged(Editable s) {
                // empty
            }
        });
    }

    @Override
    public void setError(CharSequence error) {
        mIsError = error != null;
        super.setError(error);
        refreshDrawableState();
    }

    @Override
    public void setError(CharSequence error, Drawable icon) {
        mIsError = error != null;
        super.setError(error, icon);
        refreshDrawableState();
    }

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (mIsError) {
            mergeDrawableStates(drawableState, STATE_ERROR);
        }
        return drawableState;
    }
}

drawable/edittext_bg_error.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:id="@+id/listview_background_shape"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <stroke
        android:width="2dp"
        android:color="#f00"
        />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"
        />
    <corners android:radius="5dp"/>
    <solid android:color="#ffffffff"/>
</shape>

drawable/edittext_bg_selector.xml

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

    <!-- custom error state drawable -->
    <item android:drawable="@drawable/edittext_bg_error" app:state_error="true"/>

    <!-- Do whatever you want for all other states -->
    <item android:drawable="@android:drawable/editbox_background_normal"/>
</selector>

add to your attrs.xml

<attr name="errorColor" format="reference"/>

and to styleables.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="error">
        <attr name="state_error" format="boolean"/>
    </declare-styleable>
</resources>

and usage is really simple:

<com.example.oleksandr.inputedittext.views.InputEditText
    android:id="@id/edittext"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edittext_bg_selector"
    android:inputType="text"
    android:text="@string/hello_world"
    />

[EDIT]:

Just realized, that original answer was about changing error popup color, but not EditText background color. Anyway, hope this can help someone.

Leave a Comment