EditText underline below text property

Question

I would like to change the blue colour below the edit text, i don't know what property it is.

I tried using a different background colour for it but it didn't work.

I've attached an image below:

Laquanda

This is a background for the EditText which is available on certain api level / phone. In other words, if your app runs on a different phone you might see a different background. – Agglutinative

create you custom edittext background – Spindrift

Possible duplication of previous thread. Please check this out https://mcmap.net/q/121267/-how-to-change-focus-color-of-edittext-in-android – Arbour

Use below piece of code and let me know whether it is working or not. – Smoothtongued

android-holo-colors.com – Germinate

https://mcmap.net/q/121268/-change-edittext-border-color-duplicate – Germinate

possible duplicate of how to change focus color of EditText in Android – Holmes

Unrelated to the main point of this thread, but is it possible to achieve the tray effect on the EditText using drawables? – Lewse

Answer 1

It's actually fairly easy to set the underline color of an EditText programmatically (just one line of code).

To set the color:

editText.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_IN);

To remove the color:

editText.getBackground().clearColorFilter();

Note: when the EditText has focus on, the color you set won't take effect, instead, it has a focus color.

API Reference:

Drawable#setColorFilter

Drawable#clearColorFilter

Chirrupy

Also works on Xamarin for Android, in your custom renderer OnElementChanged you can do Control.Background.SetColorFilter(Android.Graphics.Color.White, PorterDuff.Mode.SrcIn); – Eisinger

@DavidConlisk which Renderer do you override? I'm trying to figure out how to make this work for a search bar. – Boccherini

@NickN. I was using this for a picker, so I overrode the PickerRenderer. It should work with whatever renderer suits you best (in theory!) – Eisinger

I guess it should, but the problem is may be that the SearchBarRenderer is not of type EditText. Can't get it to work. – Boccherini

Answer 2

Use android:backgroundTint="" in your EditText xml layout.

For api<21 you can use AppCompatEditText from support library thenapp:backgroundTint=""

Johnsen

This only works currently in api 21 and above. no backwards support. – Sphene

This is by far the simplest and most concise solution. – Osteen

@JohnShelley see my answer below, it works for pre-Lollipop and up. – Six

android:background="@null" for devices with api <21. – Balbriggan

To make this attribute work in APIs below 21 you should use app (xmlns:app="schemas.android.com/apk/res-auto") namespace instead of android. – Fate

I'm using android:background="@null" but also android:paddingBottom="10dp" and android:paddingTop="10dp" – Bribe

android:backgroundTint only changes the color of the underline when the EditText isn't active, so in OP's image from grey to ???. It doesn't help changing the "active" color, so blue in OP's screenshot. – Cheslie

Answer 3

You have to use a different background image, not color, for each state of the EditText (focus, enabled, activated).

http://android-holo-colors.com/

In the site above, you can get images from a lot of components in the Holo theme. Just select "EditText" and the color you want. You can see a preview at the bottom of the page.

Download the .zip file, and copy paste the resources in your project (images and the XML).

if your XML is named: apptheme_edit_text_holo_light.xml (or something similar):

1. Go to your XML "styles.xml" and add the custom EditText style:

   <style name="EditTextCustomHolo" parent="android:Widget.EditText">
      <item name="android:background">@drawable/apptheme_edit_text_holo_light</item>
      <item name="android:textColor">#ffffff</item>
   </style>
   

2. Just do this in your EditText:

   <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      style="@style/EditTextCustomHolo"/>
   

And that's it, I hope it helps you.

Rife

Answer 4

This works fine for old and new version of Android (works fine even on API 10!).

Define this style in your styles.xml:

<style name="EditText.Login" parent="Widget.AppCompat.EditText">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textColorHint">@android:color/darker_gray</item>
    <item name="colorAccent">@color/blue</item>
    <item name="colorControlNormal">@color/blue</item>
    <item name="colorControlActivated">@color/blue</item>
</style>

And now in your XML, set this as theme and style (style to set textColor, and theme to set all other things):

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="text"
    style="@style/EditText.Login"
    android:theme="@style/EditText.Login"/>

---

Edit

This solution causes a tiny UI glitch on newer Android versions (Lollipop or Marshmallow onwards) that the selection handles are underlined.

This issue is discussed in this thread. (I haven't tried this solution personally)

Six

Great answer thanks. Using parent="Widget.AppCompat.EditText", instead of parent="android:Widget.EditText" solved my major issue. – Secularism

I think you mean this works Lollipop (21) and up because I'm getting warnings that this doesn't lower than 21 – Sacking

@MarkO'Sullivan no, this works for pre-Lollipop and all the way up. I've tested it on API 10, and it works fine. Please paste the full error and the place where it shows. – Six

Focused edit text still had color primary color for me, so I had to use this approach: https://mcmap.net/q/121270/-change-thickness-of-the-bottom-line-of-edittext-when-wrapped-into-textinputlayout – Flattish

Answer 5

you can change Underline of EditText color specifying it in styles.xml. In your app theme styles.xml add the following.

<item name="android:textColorSecondary">@color/primary_text_color</item> 

As pointed out by ana in comment section

  <item name="android:colorControlActivated">@color/black</item>

setting this in theme style works well for changing color of an edittext underline.

Pediculosis

Note that android:textColorSecondary is used to determine the color of the back arrow and DrawerLayout hamburger icon in the ActionBar, too. – Dyaus

I've ended up using <item name="colorControlNormal">@color/edittext_underline_color</item> instead of textColorSecondary because of the navigation bar coloring issue. – Dyaus

Answer 6

So, you need to create a new .xml file in your drawable folder.

In that file paste this code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item
    android:bottom="8dp"
    android:left="-3dp"
    android:right="-3dp"
    android:top="-3dp">
    <shape android:shape="rectangle">
     <stroke
       android:width="1dp"
       android:color="@color/white"/>
     </shape>
   </item>
</layer-list>

And in your EditText, set

android:background="@drawable/your_drawable"

You can play with your drawable xml, set corners, paddings, etc.

Eads

this is probably the better solution given that it allows full customization of the EditText, without impacting other components in a style or layout – Vetter

from what i undetstand, you can just set the edittext's background to white – Eaves

Went through all the solutions I could find, this was the only one working for me using Android Material components. – Duclos

Answer 7

In your app style define the property colorAccent. Here you find an example

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/action_bar</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/action_bar</item>
</style>

Bode

This is for me the best answer, but should be a bit enhanced saying that after you declare your theme (AppTheme) that override the main theme (Theme.AppCompat.Light) you have to choose this theme in the manifest – Ecumenicity

Answer 8

You can change the color of EditText programmatically just using this line of code easily:

edittext.setBackgroundTintList(ColorStateList.valueOf(yourcolor));

Breastplate

Answer 9

To change bottom line color, you can use this in your app theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="colorControlNormal">#c5c5c5</item>
    <item name="colorControlActivated">#ffe100</item>
    <item name="colorControlHighlight">#ffe100</item>
</style>

To change floating label color write following theme:

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
<item name="android:textColor">#4ffd04[![enter image description here][1]][1]</item>
</style>

and use this theme in your layout:

 <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">

    <EditText
        android:id="@+id/edtTxtFirstName_CompleteProfileOneActivity"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:capitalize="characters"
        android:hint="User Name"
        android:imeOptions="actionNext"
        android:inputType="text"
        android:singleLine="true"
        android:textColor="@android:color/white" />

</android.support.design.widget.TextInputLayout>

Transnational

Focused edit text still had color primary color for me, so I had to use this approach: https://mcmap.net/q/121270/-change-thickness-of-the-bottom-line-of-edittext-when-wrapped-into-textinputlayout – Flattish

Answer 10

Use below code to change background color of edit-text's border.

Create new XML file under drawable.

abc.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00000000" />
    <stroke android:width="1dip" android:color="#ffffff" />
</shape>

and add it as background of your edit-text

android:background="@drawable/abc"

Smoothtongued

i mentioned that I had tried setting a background color above. it didn't work. – Laquanda

it's not underline your code is about border. – Libradalibrarian

Answer 11

If you don't have to support devices with API < 21, use backgroundHint in xml, for example:

 <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Task Name"
            android:ems="10"
            android:id="@+id/task_name"
            android:layout_marginBottom="15dp"
            android:textAlignment="center"
            android:textColor="@android:color/white"

            android:textColorLink="@color/blue"
            android:textColorHint="@color/blue"
            android:backgroundTint="@color/lighter_blue" />

For better support and fallbacks use @Akariuz solution. backgroundHint is the most painless solution, but not backward compatible, based on your requirements make a call.

Monique

Answer 12

change your colorAccent which color you need that color set on colorAccent and run you get the output

Gretta

Answer 13

You can do it with AppCompatEditText and color selector:

            <androidx.appcompat.widget.AppCompatEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:backgroundTint="@color/selector_edittext_underline" />

selector_edittext_underline.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/focused_color" 
          android:state_focused="true" />
    <item android:color="@color/hint_color" />
</selector>

NOTE: Put this selector file in res/color folder, not res/drawable. ususually res/color does not exist and we may have to create it.

Tyratyrannical

This is really useless answer. by attribute, 'backgroundTint' is of type color not drawable! Here from the docs <attr format="color" name="backgroundTint"/>. and that selector is not a color but drawable – Booted

this is not useless, you have to add this selector into res/color directory. Yeah I get this it must be confusing but that works. selector drawable in color folder inside res. Only then it is taken as a color not drawable. let me update this answer. – Booted

Answer 14

Simply change android:backgroundTint in xml code to your color

Camus