CODEWITHSUNDEEP
androidxmllayoutstyles
Alex
Alex

Reputation: 2763

How to change line color in EditText

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

Upvotes: 270

Views: 408681

Answers (22)

amir hossein kazemi
amir hossein kazemi

Reputation: 94

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));

Upvotes: 7

Matin Ashtiani
Matin Ashtiani

Reputation: 798

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

Upvotes: 15

Mayuresh Deshmukh
Mayuresh Deshmukh

Reputation: 1127

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);
    }
}

Upvotes: 2

MilapTank
MilapTank

Reputation: 10076

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" />

Upvotes: 389

Mladen Rakonjac
Mladen Rakonjac

Reputation: 9812

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" />

Upvotes: 234

Rahul
Rahul

Reputation: 3349

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" />

Upvotes: 48

j2emanue
j2emanue

Reputation: 62559

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"/>

Upvotes: 11

Ketan Ramani
Ketan Ramani

Reputation: 5803

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"/>

Upvotes: 6

Krishna Raj Salim
Krishna Raj Salim

Reputation: 7390

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

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

enter image description here

enter image description here

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

Upvotes: 16

nivla360
nivla360

Reputation: 1129

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

Upvotes: 0

user5913742
user5913742

Reputation:

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

Upvotes: 4

doctorram
doctorram

Reputation: 1230

Programmatically, you can try:

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

Upvotes: 26

ashishdhiman2007
ashishdhiman2007

Reputation: 817

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>

Upvotes: 1

Singupurapu prudhvi raj
Singupurapu prudhvi raj

Reputation: 57

 <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 **

Upvotes: 1

Ankush
Ankush

Reputation: 1978

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.

Upvotes: 2

Shahid Sarwar
Shahid Sarwar

Reputation: 1209

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());
            }

Upvotes: 3

VVB
VVB

Reputation: 7641

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

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

Upvotes: 1

Sfseyhan
Sfseyhan

Reputation: 1361

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.

Upvotes: 2

Damian Esteves
Damian Esteves

Reputation: 901

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" />

Upvotes: 80

Suhyun Kim
Suhyun Kim

Reputation: 121

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>

Upvotes: 9

CodeWarrior
CodeWarrior

Reputation: 5176

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.

Upvotes: 4

Egor Neliuba
Egor Neliuba

Reputation: 15054

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"

Upvotes: 7

Related Questions