How to change line color in EditText

Question

I am creating an EditText in my layout xml file

But I want to change color line in EditText from Holo to (for example) red. How that can be done?

enter image description here

MilapTank · Accepted Answer · 2020-08-10T18:40:42.170

This is the best tool that you can use for all views and its FREE many thanks to @Jérôme Van Der Linden.

The Android Holo Colors Generator allows you to easily create Android components such as EditText or spinner with your own colours for your Android application. It will generate all necessary nine patch assets plus associated XML drawable and styles which you can copy straight into your project.

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

UPDATE 1

This domain seems expired but the project is an open source you can find here

https://github.com/jeromevdl/android-holo-colors

try it

this image put in the background of EditText

android:background="@drawable/textfield_activated"

enter image description here

UPDATE 2

For API 21 or higher, you can use android:backgroundTint

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Underline color change"
        android:backgroundTint="@android:color/holo_red_light" />

Update 3 Now We have with back support AppCompatEditText

Note: We need to use app:backgroundTint instead of android:backgroundTint

<android.support.v7.widget.AppCompatEditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Underline color change"
    app:backgroundTint="@color/blue_gray_light" />

Update 4 AndroidX version

  <androidx.appcompat.widget.AppCompatEditText

    app:backgroundTint="@color/blue_gray_light" />

@CodingJohn this project is open sourced you can find here https://github.com/jeromevdl/android-holo-colors — MilapTank, Dec 13 '17 at 13:16
and does who say that we have to use "app:backgroundTint instead of android:backgroundTint"?? — user924, Apr 12 '18 at 20:10
if you want *backward compatibility* then you can use app:*** OW android: *** — MilapTank, Apr 14 '18 at 04:25
app:backgroundTint overrides android:background in the widget, if you want to change both you will have to set the background in a FrameLayout wrapper. — redocoder, Jul 11 '22 at 13:04

score 233 · Answer 2 · edited Mar 29 '20 at 08:28

233

I don't like previous answers. The best solution is to use:

<android.support.v7.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />

android:backgroundTint for EditText works only on API21+ . Because of it, we have to use the support library and AppCompatEditText.

Note: we have to use app:backgroundTint instead of android:backgroundTint

AndroidX version

<androidx.appcompat.widget.AppCompatEditText

      app:backgroundTint="@color/blue_gray_light" />

edited Mar 29 '20 at 08:28

Rahul

3,293
2
31
43

answered Jan 24 '17 at 11:49

Mladen Rakonjac

9,562
7
42
55

4

This is the best solution! Simple and works on all API levels. Thanks! – Ivo Stoyanov Mar 29 '17 at 12:44
9

you don't need that, if you use the appcompat library EdtiTexts are automatically transformed into AppCompatEditText and the background tint applied. – stephane k. Apr 30 '17 at 17:03
I think this should be exactly solution – Tung Vo May 25 '17 at 09:49
Thank you very much. It worked for API 16+. Best Solution. – André Luiz Reis Jun 28 '17 at 19:35
2

possible to set app:backgroundTint programatically? I could find a method 'setBackgroundTint' – Drunken Daddy Mar 11 '18 at 07:37
1

background tint changes the entire background tint, not the underline – Code Wiget Apr 07 '20 at 17:07
@Code Widget: wrap the AppCompatEditText in a FrameLayout, then you can set the background in the FrameLayout and it won't be affected by the backgroundTint in the AppCompatEditText. – redocoder Jul 11 '22 at 13:08

score 79 · Answer 3 · answered Nov 30 '15 at 17:10

79

You can also quickly change the EditText's underline color by tinting the background of the EditText like so:

<EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Something or Other"
            android:backgroundTint="@android:color/holo_green_light" />

answered Nov 30 '15 at 17:10

Damian Esteves

891
6
3

19

Only works in API 21 or higher. Any way to make this work for lesser API level? – Vucko Apr 01 '16 at 10:13
Check reVerse solution http://stackoverflow.com/questions/26574328/changing-edittext-bottom-line-color-with-appcompat-v7 – powder366 Oct 31 '16 at 15:47
@mladj0ni Cool, +1d – Vucko Mar 24 '17 at 12:42
3

For lesser api levels, use only "backgroundTint" instead of "android:backgroundTint" Credits https://stackoverflow.com/a/29400711/1590911 – Hasaan Ali Jun 10 '17 at 21:27
this changes the entire background color, not the line color – Code Wiget Apr 07 '20 at 17:08

Rahul · Answer 4 · 2020-03-29T06:44:23.863

48

for API below 21, you can use theme attribute in EditText put below code into style file

<style name="MyEditTextTheme">
    <item name="colorControlNormal">#FFFFFF</item>
    <item name="colorControlActivated">#FFFFFF</item>
    <item name="colorControlHighlight">#FFFFFF</item>
</style>

use this style in EditText as

<EditText
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="@dimen/user_input_field_height"
    android:layout_marginTop="40dp"
    android:hint="@string/password_hint"
    android:theme="@style/MyEditTextTheme"
    android:singleLine="true" />

edited Mar 29 '20 at 06:44

answered Jan 31 '18 at 11:08

Rahul

3,293
2
31
43

do you know how to add alpha/opacity to the style file? Like it should take the normal color with an opacity and once they start typing, it should take the activated or highlighted color – ASN Jun 13 '18 at 06:01
1

@ANS for that you need to add a text watcher listener and set the opacity in "onTextChanged" method dynamically – Rahul Jun 13 '18 at 06:17
oh. So it cannot be added to the styling or selector file and should be done dynamically? – ASN Jun 13 '18 at 06:20
@ASN opacity is added in hex color i the first two characters 00-FF so for instance: #A1FAFAFA – aimiliano Sep 18 '18 at 14:03

doctorram · Answer 5 · 2017-07-07T04:14:58.060

26

Programmatically, you can try:

editText.getBackground().mutate().setColorFilter(getResources().getColor(android.R.color.holo_red_light), PorterDuff.Mode.SRC_ATOP);

edited Jul 07 '17 at 04:14

answered Jul 07 '17 at 04:08

doctorram

1,112
14
13

2

Best answer for Xamarin.Forms effect – mister_giga Nov 15 '17 at 09:56

Krishna Raj Salim · Answer 6 · 2019-01-09T15:28:52.653

16

Its pretty simple (Required: Minimum API 21)...

Go to your xml and select the EditText field
On the right side, you can see the 'Attributes' window. Select 'View All Attributes'
Just search for 'tint'
And add/change the 'backgroundTint' to a desired color hex (say #FF0000)

Keep Coding........ :)

edited Jan 09 '19 at 15:28

answered Jun 30 '18 at 11:12

Krishna Raj Salim

7,331
5
34
66

2

Minimum API 21. – Maihan Nijat Oct 28 '18 at 13:39
3

Changing the background tint changes the BACKGROUND. This answer is incorrect – Code Wiget Mar 28 '20 at 19:51

Matin Ashtiani · Answer 7 · 2021-02-19T03:11:14.247

15

You can change the color of EditText programmatically just using this line of code:edittext.setBackgroundTintList(ColorStateList.valueOf(yourcolor));

edited Feb 19 '21 at 03:11

answered Oct 17 '17 at 06:57

Matin Ashtiani

758
9
11

That's what I'm looking for ! Thx – Aphicha Intaragumhaeng Jan 16 '20 at 09:38
1

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { editText.setBackgroundTintList(ColorStateList.valueOf(Color.WHITE)); } – Bay Nov 28 '20 at 14:03

score 11 · Answer 8 · edited Oct 09 '19 at 14:58

i think the best way is by theme:

<style name="MyEditTextTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorControlNormal">@color/black</item>
        <item name="colorControlActivated">@color/action_blue</item>
        <item name="colorControlHighlight">@color/action_blue</item>
</style>

<style name="AddressBookStyle" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="android:layout_width">match_parent</item>
     <item name="android:layout_height">wrap_content</item>
     <item name="android:textSize">13sp</item>
     <item name="android:theme">@style/MyEditTextTheme</item>
</style>

<android.support.v7.widget.AppCompatEditText
            style="@style/AddressBookStyle"/>

this doesnt work for me with style tag but with android:theme tag — aimiliano, Sep 18 '18 at 14:05

score 9 · Answer 9 · answered May 01 '15 at 15:12

To change Edittext’s underline color:

If you want the entire app to share this style, then you can do the following way.

(1) go to styles.xml file. Your AppTheme that inherits the parent of Theme.AppCompat.Light.DarkActionBar (in my case) will be the base parent of all they style files in your app. Change the name of it to “AppBaseTheme’. Make another style right under it that has the name of AppTheme and inherits from AppBaseTheme that you just edited. It will look like following:

<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
    <!--see http://www.google.com/design/spec/style/color.html#color-color-palette-->
    <item name="colorPrimary">@color/material_brown_500</item>
    <item name="colorPrimaryDark">@color/material_brown_700</item>
    <item name="colorAccent">@color/flamingo</item>

<style name="AppTheme" parent="AppBaseTheme">
    <!-- Customize your theme here. -->
</style>

Then change the “colorAccent” to whatever the color you want your EditText line color to be.

(2) If you have other values folders with style.xml, this step is very important. Because that file will inherit from your previous parent xml file. For example, I have values-19/styles.xml. This is specifically for Kitkat and above. Change its parent to AppBaseTheme and make sure to get rid of “colorAccent” so that it doesn’t override the parent’s color. Also you need to keep the items that are specific to version 19. Then it will look like this.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

score 7 · Answer 10 · answered Jul 10 '14 at 13:19

The line's color is defined by EditText's background property. To change it you should change the android:background in the layout file.

I should note that this style is achieved by using a 9-patch drawable. If you look in the SDK, you can see that the background of the EditText is this image:

textfield_activated_holo_light.9.png

To change it you could open it in an image manipulation program and color it in desired color. Save it as bg_edit_text.9.png and then put it in you drawable folder. Now you can apply it as a background for your EditText like so:

android:background="@drawable/bg_edit_text"

Ketan Ramani · Answer 11 · 2019-09-13T05:26:24.643

drawable/bg_edittext.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="@color/colorDivider" />
        </shape>
    </item>
</layer-list>

Set to EditText

<android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_edittext"/>

CodeWarrior · Answer 12 · 2014-07-10T13:25:04.560

The background of widgets are API level dependent.

ALTERNATIVE 1

You can provide a custom image to your EditText background by

android:background="@drawable/custom_editText"

Your image should look something like this. It will give you the desired effect.

enter image description here

ALTERNATIVE 2

Set this xml to your EditText background attribute.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" android:padding="10dp">
<solid android:color="#4C000000"/>
    <corners android:bottomRightRadius="5dp"
             android:bottomLeftRadius="5dp"
             android:topLeftRadius="5dp"
             android:topRightRadius="5dp"/>
</shape>

This will have the same look and feel of your EditText on every API.

I'm interested in version 4.0 and above. That is, I just want to change the line color when active EditText — Alex, Jul 10 '14 at 13:16

score 4 · Answer 13 · answered Oct 17 '17 at 07:09

4

You can change the color with tinting the background <EditText android:backgroundTint="@color/red"/>

answered Oct 17 '17 at 07:09

1

this works only for api >21 you should follow @Rahul answer for all apis or add different layouts for api >21 in layout-21 folder – aimiliano Sep 18 '18 at 14:05

score 4 · Answer 14 · answered Jan 05 '22 at 20:22

in xml layout use:

android:backgroundTint="@color/colorPrimary"

or in java code copy this method:

public void changeLineColorInEditText(EditText editText, int color) {
        editText.setBackgroundTintList(ColorStateList.valueOf(color));
    }

and use it like this:

changeLineColorInEditText(editText, getResources().getColor(R.color.colorPrimary));

score 3 · Answer 15 · answered Oct 25 '16 at 13:43

Use this method.. and modify it according to ur view names. This code works great.

 private boolean validateMobilenumber() {
            if (mobilenumber.getText().toString().trim().isEmpty() || mobilenumber.getText().toString().length() < 10) {
                input_layout_mobilenumber.setErrorEnabled(true);
                input_layout_mobilenumber.setError(getString(R.string.err_msg_mobilenumber));
               // requestFocus(mobilenumber);
                return false;
            } else {
                input_layout_mobilenumber.setError(null);
                input_layout_mobilenumber.setErrorEnabled(false);
                mobilenumber.setBackground(mobilenumber.getBackground().getConstantState().newDrawable());
            }

score 2 · Answer 16 · answered Dec 07 '15 at 11:32

If you want a flat line, you can do this easily with xml. Here is the xml example:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:bottom="1dp"
        >
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#6A9A3A"/>
        </shape>
    </item>
</layer-list>

Replace the shape with a selector if you want to provide different width and color for focused edittext.

with material design it creates rectangle, with wider bottom line — Filip Zymek, Jan 02 '17 at 13:01

Ankush · Answer 17 · 2017-03-12T04:35:15.907

The best approach is to use an AppCompatEditText with backgroundTint attribute of app namespace. i.e.

    <android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"      
    app:backgroundTint="YOUR COLOR"
    android:layout_height="wrap_content" />

when we use android:backgroundTint it will only work in API21 or more but app:backgroundTint works on all API levels your app does.

score 2 · Answer 18 · answered Jan 19 '21 at 07:16

You can do it dynamically if you have custom class for edittext.

First of all you have declare state and color of edittext given below.

int[][] states = new int[][]{
                new int[]{-android.R.attr.state_focused}, // enabled
                new int[]{android.R.attr.state_focused}, // disabled
        };
        int[] colors = new int[]{
                secondaryColor,
                primaryColor,
        };

Then Create ColorStateList variable with that

ColorStateList myList = new ColorStateList(states, colors);

Then last step is to assign it to edittext.

editText.setBackgroundTintList(myList);

After this you have to written on focused change event.

this.setOnFocusChangeListener(new OnFocusChangeListener() {
                    @Override
                    public void onFocusChange(View view, boolean b) {
                        setUnderlineColor(selectionColor,deselectionColor);
                    }
                });

And you can make above code inside setUnderlineClor() Method,

private void setUnderlineColor(int primaryColor, int secondaryColor) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        int[][] states = new int[][]{
                new int[]{-android.R.attr.state_focused}, // enabled
                new int[]{android.R.attr.state_focused}, // disabled
        };
        int[] colors = new int[]{
                secondaryColor,
                primaryColor,
        };
        ColorStateList myList = new ColorStateList(states, colors);
        setBackgroundTintList(myList);
    }
}

guys setOnFocusChangeListener() method is important cause after selection it wont work and it will take primary color or colorAccent of your application .. — Mayuresh Deshmukh, Jan 19 '21 at 07:17

score 1 · Answer 19 · edited Jun 20 '16 at 09:08

1

Use android:background property for that edittext. Pass your drawable folder image to it. For example,

android:background="@drawable/abc.png"

edited Jun 20 '16 at 09:08

Anirudh Sharma

7,968
13
40
42

answered Jul 10 '14 at 13:30

VVB

7,363
7
49
83

score 1 · Answer 20 · answered Apr 22 '17 at 11:28

 <EditText
        android:id="@+id/et_password_tlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#9e9e9e"
        android:backgroundTint="#000"
        android:singleLine="true"
        android:drawableTint="#FF4081"
        android:paddingTop="25dp"
        android:textColor="#000"
        android:paddingBottom="5dp"
        android:inputType="textPassword"/>

    <View
        android:id="@+id/UnderLine"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/et_password_tlay"
        android:layout_centerHorizontal="true"
        android:background="#03f94e" />

**it one of doing with view **

score 1 · Answer 21 · answered Jun 14 '17 at 13:56

Try the following way, it will convert the bottom line color of EditText, when used as a background property.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="@dimen/spacing_neg"
        android:right="@dimen/spacing_neg"
        android:top="@dimen/spacing_neg">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="@dimen/spacing_1"
                android:color="@android:color/black" />
        </shape>
    </item>
</layer-list>

nivla360 · Answer 22 · 2018-01-31T15:32:04.597

0

This can simply be done by including this android:theme="@style/AppTheme.AppBarOverlay as attribute in for your editText and add this <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> to your styles

edited Jan 31 '18 at 15:32

answered Jan 05 '18 at 20:15

nivla360

973
14
21

How to change line color in EditText

22 Answers22

Linked