Change background of EditText's error message

Solution 1:

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:

EditText with error:

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.

Solution 2:

you will need to include these dependancies:

compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'

and here is a sample on how to use it:

<android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_email" />

</android.support.design.widget.TextInputLayout>

This will give you the Material Design you are looking for to give form validation as well as a nice animation effect for the label.