How to fix background red color TextInputLayout when isEmpty in Android

Question

I want setError when TextInputLayout isEmpty, I write this code but when show error message, set red background for TextInputLayout!

I do not want set background! I want just show the error message.

My code:

if (TextUtils.isEmpty(userName)) {
register_UserName_layout.setError("Insert Username");
}

XML code :

<android.support.design.widget.TextInputLayout
    android:id="@+id/register_userUsernameTextLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/register_headerLayout"
    android:layout_margin="10dp"
    android:textColorHint="#c5c5c5">

    <EditText
        android:id="@+id/register_userUserNameText"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/selector_bg_edit"
        android:hint="نام کاربری"
        android:paddingBottom="2dp"
        android:textColor="@color/colorAccent"
        android:textCursorDrawable="@drawable/bg_input_cursor"
        android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>

How can I fix this? Thanks all <3

The wrapped `EditText`'s background is tinted by the error color when there's an error. Which is not an issue for the default material background. Post your drawable/selector_bg_edit. Follow this Android issue https://code.google.com/p/android/issues/detail?can=1&start=0&num=100&q=textinputlayout%20background&colspec=ID%20Status%20Priority%20Owner%20Summary%20Stars%20Reporter%20Opened&groupby=&sort=&id=186615 — Eugen Pechanec, Aug 28 '16 at 12:46

score 14 · Answer 1 · answered Dec 12 '16 at 20:21

I have found a workaround to this problem. You just need to create a custom EditText and override the getBackground() method of it to return a new drawable. That way TextInputLayout won't be able to set color filter on the EditText's background, since you do not return EditText's background, but some another drawable. See below:

@Override
public Drawable getBackground() {
    return ContextCompat.getDrawable(getContext(), R.drawable.some_drawable);
}

and use the custom EditText inside TextInputLayout:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <CustomEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/custom_edit_text_bg" />

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

score 12 · Answer 2 · answered Apr 23 '18 at 14:04

12

in my case I added line

<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:color="@color/lightGray" android:width="1dp"/>
    <solid android:color="@color/transparent"/>
    <padding android:top="7dp" android:bottom="7dp" android:left="7dp" android:right="7dp"/>
    <corners android:radius="2dp"/>
</shape>

this results in red border only not entire background

answered Apr 23 '18 at 14:04

rivasyshyn

141
2
4

you saved me hours of investigation :') – Achraf Amil Jan 18 '19 at 13:32
1

This worked. I had my background color as white, but changing to transparent fixed the issue – John Oberhauser Jul 22 '20 at 17:50

score 7 · Answer 3 · answered Sep 07 '17 at 17:45

You can subclass TextInputLayout and use that:

package com.mypackage;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.design.widget.TextInputLayout;
import android.util.AttributeSet;

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

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

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

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();
        clearEditTextColorfilter();
    }
    @Override
    public void setError(@Nullable CharSequence error) {
        super.setError(error);
        clearEditTextColorfilter();
    }

    private void clearEditTextColorfilter() {
        EditText editText = getEditText();
        if (editText != null) {
            Drawable background = editText.getBackground();
            if (background != null) {
                background.clearColorFilter();
            }
        }
    }
}

in your layout:

<com.mypackage.CustomTextInputLayout
    android:id="@+id/register_userUsernameTextLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/register_headerLayout"
    android:layout_margin="10dp"
    android:textColorHint="#c5c5c5">

    <EditText
        android:id="@+id/register_userUserNameText"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/selector_bg_edit"
        android:hint="نام کاربری"
        android:paddingBottom="2dp"
        android:textColor="@color/colorAccent"
        android:textCursorDrawable="@drawable/bg_input_cursor"
        android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>

I was facing the same problem from yesterday. This helped me to resolve that red background issue. Thanks — Mahesh Gaikwad, Aug 18 '18 at 11:48

score 5 · Answer 4 · answered Aug 09 '18 at 20:22

5

Bottom line with this issue is check if your EditText has a background color set. If so, remove it and put a background color on your text Input Layout widget instead. This will fix the issue of the big red box. At least it did for me.

answered Aug 09 '18 at 20:22

Ben Morris-Rains

123
1
6

1

This works and was easy with no other changes. I was using the TextInputEditText to set the background using setBackgroundColor(). Just changed to the TextInputLayout with same method call and it worked. Thanks! – pigswig Jan 22 '19 at 22:54
2

Glad I commented on this as I ran into this again... ! Alright, now I'll learn. – Ben Morris-Rains Jun 25 '19 at 22:19

score 1 · Answer 5 · edited Feb 20 '18 at 03:07

Subclass EditText and apply the follow methods:

Override getBackground and create a Drawable with input background

@Override
public Drawable getBackground() {
    return ContextCompat.getDrawable(getContext(), R.drawable.input_background);
}

your Drawable input_brackground can be like:

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

And apply EditText subclassed setBackground after TextInputLayout set error like:

private void showTheError(String error){
    textInputLayout.setError(error);
    editTextSubclassed.setBackgroundColor(getResources().getColor(R.color.inputBackgroundColor));
}

score 0 · Answer 6 · answered Feb 15 '17 at 13:32

Similar to Shahin Mursalov's answer, I call method init() in the costructor to store the background drawable when the view is created. Also I've overriden method setBackgroundResource() to store the background as well, and return it from getBackground():

public class CustomEditText extends EditText{

    private Drawable backgroundDrawable;

    public EditTextContext context) {
        super(context);
        this.context = context;
    }

    public EditTextContext context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init(attrs);
    }

    public EditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init(attrs);
    }


    public void init(AttributeSet attrs){
        TypedArray attributes = context.obtainStyledAttributes(attrs, new int[]{android.R.attr.background});
        this.backgroundDrawable = attributes.getDrawable(0);
        attributes.recycle();
    }

    @Override
    public void setBackgroundResource(@DrawableRes int resId) {
        this.backgroundDrawable = ContextCompat.getDrawable(context, resId);
        super.setBackgroundResource(resId);
    }

    @Override
    public Drawable getBackground() {
        if (backgroundDrawable != null){
            return backgroundDrawable;
        } else {
            return super.getBackground();
        }
    }
}

This way I can specify a different background in my layout and change it programatically.

score 0 · Answer 7 · answered Jul 16 '19 at 11:02

first your EditText background selector_bg_edit should be like that

 <selector xmlns:android="http://schemas.android.com/apk/res/android" >


    <item android:drawable="@drawable/code_view_item"
        android:state_focused="true"/>

    <item android:drawable="@drawable/sign_in_fields"
        android:state_focused="false"/>

    <item android:drawable="@drawable/sign_in_fields"
        android:state_active="false"/>

</selector>

And the most important thing is to put in the drawable to be transparent color like this code_view_item.xml

<stroke android:width="1dp" android:color="#15A859" />
<solid android:color="#00FFFFFF" />
<corners android:radius="12dp"/>

score 0 · Answer 8 · answered Sep 22 '20 at 19:44

0

What worked for me is just putting this below lines in my custom edit text class :

override fun getBackground(): Drawable {
    return this.context.getDrawable(R.drawable.myDrawableResource)
}

answered Sep 22 '20 at 19:44

Ankush Joshi

416
3
9

score 0 · Answer 9 · answered Apr 29 '21 at 07:23

0

My solution:

yourEdit.background.clearColorFilter()

answered Apr 29 '21 at 07:23

Andriy Z.

314
3
6

score -4 · Accepted Answer · edited Aug 28 '16 at 08:58

-4

if (TextUtils.isEmpty(userName)) {
    register_UserName_layout.setError("Insert Username");
    txtInpit.setColorFilter(R.color.white);
}

edited Aug 28 '16 at 08:58

Pistachio

1,652
1
18
38

answered Aug 28 '16 at 06:35

Yogesh Rathi

6,331
4
51
81

Can you paste which properties you set in textinput – Yogesh Rathi Aug 28 '16 at 06:42
Please see this : `if (TextUtils.isEmpty(userName)) { register_UserName_layout = (TextInputLayout) view.findViewById(R.id.register_userUsernameTextLayout); register_UserName_layout.setError("نام کاربری را وارد نکردید"); register_UserName_layout.setBackgroundColor(getResources().getColor(android.R.color.white)); }` – Aug 28 '16 at 06:49
Paste your xml declaration – Yogesh Rathi Aug 28 '16 at 06:51
Just set color filter your code will working, i check in my app then working, so can you please update this – Yogesh Rathi Aug 28 '16 at 07:06
1

I use version 24 of `compile 'com.android.support:design:24.1.0'` but not show me setColorFilter! why ?!!!!!!!!! – Aug 28 '16 at 07:52
Can you please use 23 – Yogesh Rathi Aug 28 '16 at 09:18
How come is it the right answer? I dont see setColorFilter method. – Shahzeb Aug 09 '18 at 07:36

How to fix background red color TextInputLayout when isEmpty in Android

10 Answers10