How to remove underline below EditText indicator?
AndroidAndroid Problem Overview
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>
Android Solutions
Solution 1 - Android
Make background like this
android:background="@null" of your editText
Solution 2 - Android
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
Solution 3 - Android
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"
Solution 4 - Android
Use edittext.clearComposingText(); before getText() or in .xml you can use android:inputType="text|textNoSuggestions"
Solution 5 - Android
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" />
Solution 6 - Android
android:background="@android:color/transparent"
Solution 7 - Android
programmatically I did it this way:
editText.setBackground(null);
Solution 8 - Android
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" />
Solution 9 - Android
setColorFilter() does not work on API levels 5 and below. One way is to use setBackgroundColor(TRANSPARENT color) & use clearColorFilter() to remove it.
Solution 10 - Android
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