Yellow box appears around EditText once it has been Auto-Filled

Question

As you will see by the screenshot below, it's clear to see that a yellow box appears around the EditText after it has been filled in. NOTE: This ONLY happens when the text that has been entered was AUTO-FILLED!!

My XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/login_background"
            android:background="@color/colorPrimary" />

        <View
            android:id="@+id/view"
            android:layout_width="@dimen/login_container_width"
            android:layout_height="@dimen/login_container_height"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/login_container_margin_top"
            android:background="@drawable/login_container"
            android:elevation="8dp">

        </View>

        <Button
            android:id="@+id/button"
            android:layout_width="250dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="55dp"
            android:background="@drawable/login_button"
            android:elevation="10dp"
            android:stateListAnimator="@null"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:elevation="10dp"
            android:ems="10"
            android:hint="Email address"
            android:inputType="textEmailAddress"
            android:textColor="@color/colorPrimary"
            android:layout_below="@+id/view2"
            android:layout_centerHorizontal="true"
            android:stateListAnimator="@null" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="23dp"
            android:ems="10"
            android:inputType="textPassword"
            android:elevation="10dp"
            android:hint="Password"
            android:textColor="@color/colorPrimary"
            android:layout_below="@+id/editText"
            android:layout_alignStart="@+id/editText"
            android:stateListAnimator="@null" />

    </RelativeLayout>

</LinearLayout>

Are you using appcompat? If not, switch to appcompat. Two unrelated questions - why are you using `ems`? This is not CSS, you should be using `textSize` and units in `sp`. Do you actually know what `stateListAnimator` attribute does? I've never had to use that before, you probably don't need it. — milosmns, Oct 01 '17 at 16:45
I am indeed using the AppCompat library. As for the other questions, I have made the nessicary changes. It was my fault for the stateListAnimator, I accidentally left it in after copy/paste, however the problem still persists. — , Oct 01 '17 at 18:36
Yeah those are not related. Ok then it's appcompat theming your edit text. Can you try to change the background manually? For starters set it to plain gray, just for starters — milosmns, Oct 01 '17 at 18:40
I used android:background="#808080" and it just overrided the colour and set it to yellow. However, it made a mix of grey and yellow, so it turned a stingy grey sort of colour — , Oct 01 '17 at 18:56
Wow! Didn't expect that. Maybe.. dig into app compat to see what state od the background drawable is setting it to yellow? — milosmns, Oct 01 '17 at 18:58

score 29 · Answer 1 · edited Apr 26 '23 at 15:49

29

You can customize that autofill's background. Create new styles file res/values-v26/styles.xml, add copy of your application's theme to that file with one additional line

<item name="android:autofilledHighlight">@android:color/transparent</item>

in this case it will be transparent, that is what I wanted to achieve, but you can use any color you like. https://developer.android.com/guide/topics/text/autofill

edited Apr 26 '23 at 15:49

Peter

340
4
13

answered May 22 '18 at 13:37

Yarik

487
5
13

2

Thanks. You have to make sure you put this under your application theme. adding this to any other theme wouldn't work – Hadas Kaminsky Sep 20 '18 at 18:25
1

Correct. Working as charm. Just need to add tools:ignore="NewApi" line if using version above Oreo. – Harry Dec 03 '19 at 12:16
2

is there a way to avoid duplicating the rest of the style spec (in values and values-v26)? – hmac Jan 14 '20 at 09:38

Yellow box appears around EditText once it has been Auto-Filled

1 Answers1