Edittext underline will not go away

Question

I am using a horizontal linear layout to display an image and a text field side-by-side:

             <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:background="@drawable/underline_dark"
                >


                <ImageView
                    android:id="@+id/emailImageView"
                    android:layout_width="0dp"
                    android:layout_height="30dp"
                    android:layout_weight="1"
                    android:src="@drawable/icon_email_temp" />

                <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/emailWrapper"
                    android:layout_width="270dp"
                    android:layout_height="62dp"
                    android:background="@null"
                    app:boxBackgroundColor="@android:color/transparent">

                    <EditText
                        android:id="@+id/email"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@null" />
                </com.google.android.material.textfield.TextInputLayout>

            </LinearLayout>

I added a bottom underline to the linear layout so that both the image and text field are underlined together. What I need to do now is remove the underline from the Edit Text box:

This image shows that the edit text underline is still present when un focused,

and his image shows that the edit text underline is still present when focused.

I've used the xml code from every example on SO: here and here to no avail. Changing the android:background to @null or @android:color/transparent does nothing to the edit text field.

What else can I do to remove this underline from the edittext field?

E: Please do not vote to close this... I have explained why my question is different and have linked them - those solutions DO NOT WORK.

Here is another attempt from a comment. I added the style:

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">@color/white</item>
</style>

And then updated both my text input and edit text objects:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/emailWrapper"
                    android:layout_width="270dp"
                    android:layout_height="62dp"
                    android:background="@null"
                    android:theme="@style/Theme.App.Base"
                    app:boxBackgroundColor="@null">

                    <EditText
                        android:id="@+id/email"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@null"
                        android:hint="@string/email"
                        android:inputType="textEmailAddress"
                        android:autofillHints="@string/email"
                        android:theme="@style/Theme.App.Base"
                        />
                </com.google.android.material.textfield.TextInputLayout>

it made the edit text field smaller, but didn't change the border:

EDIT: I never did find a solution. I had to change the requirements. Android's UI builder is a DISASTER. There are 10 ways to do the same thing, 5 are deprecated, 4 arent documented, and 1 doesn't work on newer phones. Total disaster.

Answer 1

i recently came across such a scenario and just tried creating a shape (drawable) and set it as background for edit text.

Something like this :

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

    <solid
        android:color="@color/colorWhite"
        >
    </solid>

    <stroke
        android:width="1dp"
        android:color="@color/colorPrimaryDark" >
    </stroke>

    <padding
        android:left="@dimen/padding_12"
        android:top="@dimen/padding_12"
        android:right="@dimen/padding_12"
        android:bottom="@dimen/padding_12"    >
    </padding>

    <corners
        android:radius="@dimen/radius_8"   >
    </corners>


</shape>

Please try if this is works for you.

Answer 2

Im not sure whats going on. I just set android:background="@null" and even only to the EditText and it worked perfectly, And there is also no underline when in focus. I suspect maybe when you set the style you undo the setting of the background.

try setting <item name="android:background">@null</item> to your style

no idea what Im doing differently. this is my code

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/lo_test"
                android:layout_marginTop="10dp"
                android:layout_gravity="center_horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="test"
                    android:id="@+id/test"
                    android:background="@null"

                    />
            </com.google.android.material.textfield.TextInputLayout>

here a screen capture (the blue and black lines are just the autocorrector, they dont appear when you write propper words). the only thing I can recommend is that you try simply copy pasting my code in a new activity. see if it works and start adding your other features to see in you can isolate the source of the weirdness.

Answer 3

Can you try this method?

Change bottom line color

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Change hint color when it is floating

<style name="MyHintStyle" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/main_color</item>
</style>


<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="@style/MyHintStyle">

<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="@style/MyHintStyle"
android:textColorHint="#c1c2c4">

Answer 4

The TextInputLayout defines an overlay theme which defines the style for the EditText. The underlining is part of the background applied to the EditText.

But your setup is not necessary anymore. The TextInputLayout.setStartIconDrawable() implements the behavior within the library itself. Just make sure to provide the drawable with the correct dimensions.

Answer 5

Nothing here worked, and it looks like there isn't a solution. Android UI is broken and fairly disgraceful in many respects. The way I solved the issue was by using android:drawableLeft:

<EditText
...
android:drawableLeft="@drawable/ic_email_left"
android:drawablePadding="20dp"
...  />

and making a custom icon (custom padding, height, width) by creating a separate xml file...:

    <item
        android:drawable="@drawable/ic_ebook"
        android:width="30dp"
        android:height="30dp"
        android:top="-20dp"
        />

</layer-list >

E: This isn't really an answer, just a workaround, so I'm not going to mark it

Answer 6

Try adding this to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"