EditText background base line color changing based on its focus in android

android colors background android-edittext

46,758

Solution 1

You can add theme for EditText

<style name="EditTextTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/primary</item>
    <item name="colorControlActivated">@color/primary</item>
    <item name="colorControlHighlight">@color/primary</item>
</style>

And you can use in EditText as

<EditText
    android:id="@+id/edtCode"
    android:layout_width="match_parent"
    android:layout_height="40dp"
   .......................
    android:theme="@style/EditTextTheme">

</EditText>

Solution 2

use this in your editText style

<item name="backgroundTint">@color/focus_tint_list</item>

focus_tint_list.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_focused="true" android:color="?attr/colorAccent"/>

   <item android:state_focused="false" android:color="#999999"/>

</selector>

Solution 3

Try Holo Color generator for custom colors.

Android Holo Colors

You can create Selector and set it as background of the EditText

res/drawable/edit_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_window_focused="false"
        android:state_enabled="true"
        android:drawable="@drawable/textfield_default" />

    <item
        android:state_window_focused="false"
        android:state_enabled="false"
        android:drawable="@drawable/textfield_disabled" />

    <item
        android:state_pressed="true"
        android:drawable="@drawable/textfield_pressed" />

    <item
        android:state_enabled="true"
        android:state_focused="true"
        android:drawable="@drawable/textfield_selected" />

    <item
        android:state_enabled="true"
        android:drawable="@drawable/textfield_default" />

    <item
        android:state_focused="true"
        android:drawable="@drawable/textfield_disabled_selected" />

    <item
        android:drawable="@drawable/textfield_disabled" />

</selector>

layout :

<EditText    
    android:id="@+id/mobilenumber"
    ....
    android:background="@drawable/edit_text" />

Solution 4

I needed the same thing, and I solved it in the following way:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_focused="true" android:state_window_focused="true">
   <shape>
     <stroke android:color="@color/blue_500" android:width="2dp" />
     <corners android:radius="45dp"/>
   </shape>
</item>
<item android:state_focused="false" android:state_window_focused="false">
  <shape>
    <stroke android:color="@color/grey_600" android:width="2dp"/>
    <corners android:radius="45dp"/>
  </shape>
</item>
</selector>

View more solutions

46,758

Author by

koti

Updated on July 23, 2022

Comments

koti almost 2 years

I need to design EditText with base line showed in below image and it will be change to some other color when it receives focus.!

enter image description here

i am using the following.

 <EditText    
    android:id="@+id/mobilenumber" 
    android:drawableLeft="@drawable/mobile"
    android:drawablePadding="15dp" 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:background="@drawable/edt_bg"
    android:singleLine="true"
    android:textColorHint="#FFFFFF"
    android:hint="@string/mobilenumber"
    android:layout_marginTop="20dp"
    android:layout_gravity="center"
    android:padding="5dp"
    android:imeOptions="actionNext"
    android:maxLength="10"
    android:textColor="#ffffff"
    android:textCursorDrawable="@null"

    />

So, please guide me how to handle this.

Alexey Shevelyov over 7 years

Nice answer. Your XML Code misses </selector> tag though. Other than that - thanks bro!
D2TheC over 5 years

where do you put the file focus_tint_list.xml?
Andy Weinstein over 5 years

If you want to control the color of the tip when it goes up above the field when the field is selected, add the same theme to the TextInputLayout which is wrapping your EditText.
Slashbin over 5 years

In res create color resources directory, then create focus_tint_list color resource inside color directory
Viswanath Kumar Sandu over 5 years

This will crash on oppo devices. Removing the colorControl params in style fixes it. Trying to find a better solution
Jaimin Modi almost 5 years

How can I set Theme for EditText dynamically ?
Jaimin Modi almost 5 years

How can I set Theme created dynamically to EditText ? What can I do to set that theme dynamically.
blackHawk over 4 years

Thanks best answer
gingerNinja about 4 years

Where do we need to set this selector file for the baseline of EditText?