[android] EditText underline below text property

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:

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.

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

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

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.

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

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)

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

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

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>

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.

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.

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

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"

Simply change android:backgroundTint in xml code to your color

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.

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>