Edittext Background Base Line Color Changing Based on Its Focus in Android

How to change focus color of EditText in Android

You'll have to create/modify your own NinePatch image to replace the default one, and use that as the background of your EditText. If you look in your SDK folder, under your platform, then res/drawable, you should find the NinePatch image for the EditText focus state. If that's all you want to change, you can just pull it into Photoshop, or whatever image editing software you have, and change the orange color to a color of your choosing. Then save that into your drawable folder, and build a new StateListDrawable, for example something like the below:

edittext_modified_states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="@android:drawable/edittext_pressed"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="@drawable/edittext_focused_blue"
/> <!-- focused -->
<item
android:drawable="@android:drawable/edittext_normal"
/> <!-- default -->
</selector>

I don't know offhand the actual names for the default NinePatches for the EditText, so replace those as necessary, but the key here is to just use the @android:drawable images for the ones you haven't modified (or you can copy them over to your project's drawable folder), and then use your modified drawable for your focused state.

You can then set this StateListDrawable as the background for your TextView, like so:

<TextView
android:background="@drawable/edittext_modified_states"

Change Edit Text Underline Color to be the same when off focused & focused

You can try adding a theme

<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 set it on your EditText

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/EditTextTheme">
</EditText>

How to change line color in EditText

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"

Sample Image


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

Changing EditText bottom line color with appcompat v7

Finally, I have found a solution. It simply consists of overriding the value for colorControlActivated, colorControlHighlight and colorControlNormal in your app theme definition and not your edittext style. Then, think to use this theme for whatever activity you desire. Below is an example:

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>
</style>


Related Topics



Leave a reply



Submit