How to remove underline below EditText indicator?

Question

Recently I had to change the EditText indicator color and, after doing that, a weird line started to appear below the indicator. How can I remove that? Code for what I've done is below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="#4FB6E1">

    <br.com.edsilfer.kiwi.loading.CircularProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:colorLine="#4e2972"/>

    <pl.droidsonroids.gif.GifTextView
        android:id="@+id/flying_charizard"
        android:layout_width="100dip"
        android:layout_height="70dip"
        android:layout_above="@+id/login_cluster"
        android:layout_margin="15dip"
        android:background="@drawable/flying_charizard"/>

    <android.support.v7.widget.CardView
        android:id="@+id/login_cluster"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="15dip"
        android:layout_marginRight="15dip"
        android:elevation="4dip"
        card_view:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingBottom="10dip"
            android:paddingLeft="10dip"
            android:paddingRight="10dip">

            <include layout="@layout/rsc_util_remove_act_edittext_focus"/>

            <EditText
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="E-mail"
                android:imeOptions="actionNext"
                android:inputType="text"
                android:textColor="@color/textSecondary"
                android:textColorHint="@color/textSecondary"
                android:theme="@style/CustomEditText"/>

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dip"
                android:hint="Password"
                android:imeOptions="actionGo"
                android:inputType="textPassword"
                android:fontFamily="sans-serif"
                android:textColor="@color/textSecondary"
                android:textColorHint="@color/textSecondary"
                android:theme="@style/CustomEditText"/>


            <com.gc.materialdesign.views.ButtonRectangle
                android:id="@+id/login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="15dip"
                android:background="@color/textSecondary"
                android:text="@string/act_login_login"/>

            <com.gc.materialdesign.views.ButtonFlat
                android:id="@+id/register"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dip"
                android:background="@color/textSecondary"
                android:text="@string/act_login_create_account"/>

            <com.gc.materialdesign.views.ButtonFlat
                android:id="@+id/forgotPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@color/textSecondary"
                android:text="@string/act_login_forgot_password"/>

            <TextView
                android:id="@+id/copyright"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginBottom="10dip"
                android:layout_marginTop="5dip"
                android:alpha="0.7"
                android:text="@string/act_login_copyright"
                android:textAlignment="center"
                android:textColor="@color/textSecondary"
                android:textColorHint="@color/textSecondary"
                android:textSize="@dimen/textH4"
                android:textStyle="bold"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>

    <pl.droidsonroids.gif.GifTextView
        android:id="@+id/man_running"
        android:layout_width="60dip"
        android:layout_height="70dip"
        android:layout_alignParentBottom="true"
        android:layout_margin="5dip"
        android:background="@drawable/man_running"
        android:elevation="1dp"/>

    <pl.droidsonroids.gif.GifTextView
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/login_background"/>
</RelativeLayout>

Styles.xml

<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/Theme.AppCompat.Light">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="CustomEditText" parent="Widget.AppCompat.EditText">
    <item name="colorControlNormal">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">@color/colorPrimaryDark</item>
    <item name="colorControlHighlight">@color/colorPrimaryDark</item>
</style>

This is not a duplicate since I'm not trying to remove the underbar but an extra line that shows up over the underbar. Please, read the description more carrefully — E. Fernandes, Feb 19 '17 at 13:15
For material design use app:boxStrokeWidth="0dp" on TextInputLayout. — Sumit Shukla, Apr 25 '20 at 13:19

score 132 · Accepted Answer · answered Jun 15 '16 at 03:51

132

Make background like this android:background="@null" of your editText

answered Jun 15 '16 at 03:51

Jinesh Francis

3,377
3
22
37

25

Cannot use this solution if you already use a custom background drawable.. :( – angryITguy Sep 11 '18 at 02:27
5

I think if we use a custom background,the line below the edit text will not be visible. – Jinesh Francis Sep 11 '18 at 10:12
2

no i use a custom background drawable. but still have the underline this not work in this situation – Sideeg MoHammed May 19 '20 at 01:25
totally agreed, using custom background it is still the underline – Pablo Martinez Mar 23 '21 at 17:55

Gabriel Rohden · Answer 2 · 2019-05-15T12:54:22.700

67

If you are using the material components TextInputLayout, setting the background color to something else doesn't remove the underline, the solution is to set the BoxBackgroundMode like this (kotlin): myTextInputLayout.boxBackgroundMode = TextInputLayout.BOX_BACKGROUND_NONE

or in xml: app:boxBackgroundMode="none"

I think that this change on the component was made to make the underline 'work' with a custom background color

edited May 15 '19 at 12:54

answered Mar 18 '19 at 14:24

Gabriel Rohden

1,307
9
19

1

THANK YOU!!!!!!!!!!!!!!!!!!! `TextInputLayout layout = new TextInputLayout(context); layout.setBoxStrokeColor(Color.TRANSPARENT); //<-- nope layout.setBackgroundColor(Color.TRANSPARENT); //<-- nope layout.setBackground(null);//<-- nope layout.setBackgroundResource(R.color.textboxcolor);//<-- nope ` – Mr Heelis Aug 28 '19 at 16:08
1

This is the only true answer. All others are fake. – Chapz Oct 30 '19 at 19:59
1

Not working for me :/ – kilian eller Nov 09 '19 at 17:58
Right to the point! Works like a charm :) – kkaun Mar 10 '20 at 11:54
1

Thanks, it works with material edit text too. – Syyam Noor Mar 18 '20 at 11:26
2

WOW! of all the workarounds mentioned here, `app:boxBackgroundMode="none"` does the trick with custom background as well! Kudos. For reference I was using a material `TextInputEditText` wrapped by a `TextInputLayout` with androidX – sud007 Sep 22 '20 at 06:03
Nice, well done! – benzabill Mar 19 '21 at 18:29

score 16 · Answer 3 · answered Mar 04 '19 at 05:16

If android:background="@null" doesn't help - try to combine it with android:inputType="text|textNoSuggestions"

The full view:

    <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@null"
      android:inputType="text|textNoSuggestions" />

score 15 · Answer 4 · edited Mar 15 '17 at 11:52

15

set the background color of EditText to white.

You can set the background color of your screen to EditText background, if both screen background color and EditText background color are same means EditText underline won't be visible.

android:background="#FFFFFF"

edited Mar 15 '17 at 11:52

aleksandrbel

1,422
3
20
38

answered Jun 15 '16 at 05:59

Yatish

521
3
14

score 14 · Answer 5 · edited Mar 15 '17 at 13:24

14

Use edittext.clearComposingText(); before getText() or in .xml you can use android:inputType="text|textNoSuggestions"

edited Mar 15 '17 at 13:24

aleksandrbel

1,422
3
20
38

answered Jun 15 '16 at 03:26

Hiren

1,581
1
12
14

8

Line is still there even using that... – E. Fernandes Jun 15 '16 at 03:29

score 8 · Answer 6 · answered May 18 '17 at 10:48

8

android:background="@android:color/transparent"

answered May 18 '17 at 10:48

Makvin

3,475
27
26

score 7 · Answer 7 · answered Mar 01 '18 at 10:04

7

programmatically I did it this way:

editText.setBackground(null);

answered Mar 01 '18 at 10:04

ch13mob

261
6
11

2

Also can be done via xml - android:background="@null" – Mark Lapasa Feb 04 '19 at 16:27

score 1 · Answer 8 · answered Jan 23 '18 at 12:17

You can also define a STYLE for your editText so you can regroup all properties in common. It is very powerful if you have to multiple edit text that need to has the behaviour

Put the code in res/values/styles.xml

<style name="MyEditTextStyle" parent="@android:style/TextAppearance.Widget.EditText">
    <item name="android:background">@color/transparence</item> //NO UNDERBAR
    <item name="android:maxLines">1</item>
    <item name="android:height">28dp</item> //COMMON HEIGHT
</style>

After that you just need to call it in your editText

               <EditText
                android:id="@+id/edit1"
                style="@style/MyEditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
               <EditText
                android:id="@+id/edit2"
                style="@style/MyEditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

score 0 · Answer 9 · answered Mar 09 '17 at 16:01

0

setColorFilter() does not work on API levels 5 and below. One way is to use setBackgroundColor(TRANSPARENT color) & use clearColorFilter() to remove it.

answered Mar 09 '17 at 16:01

android_eng

1,370
3
17
40

score 0 · Answer 10 · answered Aug 20 '18 at 11:44

I had the same issue as shown in the screenshot of the OP. The solutions described in accepted answer just remove the underline which you wanted to customize. It would be ok to inherit the style from Widget.AppCompat.EditText but not theme. The fix is to remove inheritance from your CustomEditText:

<style name="CustomEditText"><!-- parent removed -->
    <item name="colorControlNormal">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">@color/colorPrimaryDark</item>
    <item name="colorControlHighlight">@color/colorPrimaryDark</item>
</style>

Credits go to this answer

How to remove underline below EditText indicator?

10 Answers10

Linked

Related