111

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:

enter image description here

8
  • 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. Jan 31, 2014 at 12:46
  • create you custom edittext background
    – Vijju
    Jan 31, 2014 at 12:47
  • 1
    Possible duplication of previous thread. Please check this out stackoverflow.com/a/4585750/1129468 Jan 31, 2014 at 12:50
  • Use below piece of code and let me know whether it is working or not. Jan 31, 2014 at 12:54
  • android-holo-colors.com Jan 31, 2014 at 13:36

14 Answers 14

93

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

4
  • 4
    Also works on Xamarin for Android, in your custom renderer OnElementChanged you can do Control.Background.SetColorFilter(Android.Graphics.Color.White, PorterDuff.Mode.SrcIn); Feb 16, 2016 at 12:33
  • @DavidConlisk which Renderer do you override? I'm trying to figure out how to make this work for a search bar.
    – Nick N.
    Sep 12, 2016 at 14:49
  • @NickN. I was using this for a picker, so I overrode the PickerRenderer. It should work with whatever renderer suits you best (in theory!) Sep 12, 2016 at 14:59
  • 1
    I guess it should, but the problem is may be that the SearchBarRenderer is not of type EditText. Can't get it to work.
    – Nick N.
    Sep 12, 2016 at 15:33
90

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

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

7
  • 14
    This only works currently in api 21 and above. no backwards support. Jun 22, 2015 at 0:46
  • 2
    This is by far the simplest and most concise solution. Sep 28, 2015 at 19:08
  • @JohnShelley see my answer below, it works for pre-Lollipop and up.
    – Sufian
    Nov 30, 2016 at 13:22
  • 3
    android:background="@null" for devices with api <21. Jan 8, 2017 at 7:37
  • 4
    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.
    – Andrei K.
    Mar 12, 2017 at 15:55
38

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.

0
25

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)

4
  • Great answer thanks. Using parent="Widget.AppCompat.EditText", instead of parent="android:Widget.EditText" solved my major issue.
    – cfl
    Jan 30, 2017 at 8:29
  • 1
    I think you mean this works Lollipop (21) and up because I'm getting warnings that this doesn't lower than 21 Mar 6, 2017 at 17:35
  • @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.
    – Sufian
    Mar 7, 2017 at 7:53
  • Focused edit text still had color primary color for me, so I had to use this approach: stackoverflow.com/a/36543554/2413303 Apr 25, 2018 at 11:07
19

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.

2
  • 3
    Note that android:textColorSecondary is used to determine the color of the back arrow and DrawerLayout hamburger icon in the ActionBar, too. Oct 16, 2015 at 8:20
  • 8
    I've ended up using <item name="colorControlNormal">@color/edittext_underline_color</item> instead of textColorSecondary because of the navigation bar coloring issue. Dec 11, 2015 at 15:41
16

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.

3
  • 1
    this is probably the better solution given that it allows full customization of the EditText, without impacting other components in a style or layout Jun 30, 2016 at 12:31
  • from what i undetstand, you can just set the edittext's background to white
    – rmanalo
    Jul 12, 2016 at 2:44
  • Went through all the solutions I could find, this was the only one working for me using Android Material components. Jul 10, 2019 at 8:08
10

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>
1
  • 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
    – Ast
    Nov 9, 2021 at 15:19
5

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

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

0
1

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>

enter image description here

1
0

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"
2
  • i mentioned that I had tried setting a background color above. it didn't work. Jan 31, 2014 at 17:44
  • it's not underline your code is about border. Dec 16, 2020 at 12:31
0

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.

0

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

0

Simply change android:backgroundTint in xml code to your color

0

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.

2
  • 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
    – sud007
    Nov 1, 2020 at 10:29
  • 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.
    – sud007
    Nov 6, 2020 at 9:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.