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.

Does this answer your question? [how to change color of TextinputLayout's label and edittext underline android](https://stackoverflow.com/questions/31722034/how-to-change-color-of-textinputlayouts-label-and-edittext-underline-android) — cutiko, Mar 22 '20 at 15:35
@cutiko see my edit. It made the text field smaller & moved up, but did not remove the border — Code Wiget, Mar 22 '20 at 22:01
I copied and past your work and there is no lines appears for the edittext — Shalan93, Apr 04 '20 at 12:11
I have tested your code on google pixel with android pie your code working fine and there is no line appears bottom to EditText — Shalan93, Apr 04 '20 at 12:19
i agree with @Shalan93 as you can see in my answer your code weirdly enough works for us. probably the issue is somewhere else in your code. maybe you are setting something programmatically somewhere else in java. I know that you have solved it in a different way already but if you have some time just create an additional clean test activity and try again. — quealegriamasalegre, Apr 05 '20 at 20:43

score 1 · Answer 1 · answered Apr 03 '20 at 19:38

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">

quealegriamasalegre · Answer 2 · 2020-04-03T23:55:09.590

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.

score 0 · Answer 3 · answered Mar 22 '20 at 15:33

0

Try adding this to your TextInputLayout:

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

answered Mar 22 '20 at 15:33

Mike

1,313
12
21

That added a border all of the way around my edit text – Code Wiget Mar 22 '20 at 21:41
1

Sorry about that, you should also add app:boxStrokeColor to @android:color/transparent – Mike Mar 22 '20 at 23:30
that didn't have any affect :/ – Code Wiget Mar 23 '20 at 17:46

Code Wiget · Answer 4 · 2020-03-29T20:25:23.877

0

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

edited Mar 29 '20 at 20:25

answered Mar 23 '20 at 21:01

Code Wiget

1,540
1
23
35

This is the right way. Whenever you want Image and Text Side by side, android recommends using drawableLeft, drawableRight – Muhammad Hashim Shafiq Apr 05 '20 at 06:10
@MuhammadHashimShafiq but it doesn't answer the question – Code Wiget Apr 07 '20 at 15:58
@CodeWidget I will try and if solved the problem will definitely post a solution here. – Muhammad Hashim Shafiq Apr 08 '20 at 04:52

score 0 · Answer 5 · answered Mar 30 '20 at 07:53

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.

score 0 · Answer 6 · answered Apr 04 '20 at 10:21

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.

Edittext underline will not go away

6 Answers6