Cannot set colorControlNormal and android:textColor in style

Question

I am trying to style a material EditText view:

<style name="AppTheme.EditText" parent="@style/Widget.AppCompat.EditText">
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">#8AFFFFFF</item>

    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">@color/white</item>
</style>

Then I apply the style on my theme:

<style name="AppTheme">
    <item name="editTextStyle">@style/AppTheme.EditText</item>
</style>

And apply theme to activity:

  <activity
        android:name=".MyActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="stateAlwaysHidden"
        android:theme="@style/AppTheme">

However this is not changing the underline color.

I know that I can change the accentColor to change the underline color, but I don't want to do that as I need my accent color to be different for some of the other controls.

Can I style the control underline color like this?

Answer 1

Reason it is not working: colorControlNormal is an attr of the theme while android:textColor is a style attribute. To change colorControlNormal, you have to override a Theme, to change android:textColor value, you have to override a style. There is no attributes named colorControlNormal in @style/Widget.AppCompat.EditText or any parents of it. Therefore, you are overriding nothing when doing this:

<style name="AppTheme.EditText" parent="@style/Widget.AppCompat.EditText">
    <item name="colorControlNormal">@color/white</item>
</style>

Solution: To actually change the value of colorControlNormal, you have to change it in a theme. To do that without changing the activity's theme, you can:

1/ Create a ThemeOverlay with only the theme attributes that you wish to change:

<style name="AppTheme.EditText"> 
    <item name="colorControlNormal">@color/white</item>
</style>

2/ Use it only in the your EditText view:

<EditText
    android:layout_width="match_parent"
    android:theme="@style/AppTheme.EditText"
/>

What is actually happening here is that the View's theme attributes (if exists) will be used. The activity's theme will be used as fallback.

You can always change colorControlNormal of the activity's theme to affect the whole activity.

Answer 2

Here you go just follow the below steps and you are done.

Step 1: Create Style

Setting the android:textCursorDrawable attribute to @null should result in the use of android:textColor as the cursor color.

<style name="editTextTheme" parent="@style/Widget.AppCompat.EditText">

        <item name="android:textColorHint">@color/white</item>

        <item name="colorControlNormal">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="colorControlHighlight">@color/white</item>

        <item name="colorAccent">@color/white</item>
        <item name="android:textCursorDrawable">@null</item>
        <item name="android:textColorPrimary">@color/white</item>

    </style>

Step 2: Use that style as a Theme

<style name="MyTheme">
        <item name="theme">@style/editTextTheme</item>
</style>

Step 3: implement that theme in your component

<android.support.v7.widget.AppCompatEditText
        android:id="@+id/editText"
        style="@style/MyTheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Name"
        android:inputType="textPersonName" />

Answer 3

This solution is worked for me. sIt simply consists of overriding the value for colorControlActivated, colorControlHighlight and colorControlNormal in your edittext style theme. Other think is if your want to change the cursor color also then android:textCursorDrawable use this property. I put this edittext style in style.xml(v21) also.Then, think to use this theme for whatever activity you desire. Below is an example:

First Solution

<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>
        <!--Edittext theme -->
        <item name="editTextStyle">@style/App_EditTextStyle</item>
</style>

<style name="App_EditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">@color/black</item>

    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">@color/white</item>

    <item name="android:backgroundTint" >@color/white</item>
    <item name="backgroundTint">@color/white</item>

    <item name="android:textCursorDrawable">@color/white</item>
</style>

Other Solution

You can set this by programmatically also. Here is the solution for API < 21 and above

Drawable drawable = yourEditText.getBackground(); // get current EditText drawable 
    drawable.setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP); // change the drawable color

    if(Build.VERSION.SDK_INT > 16) {
        yourEditText.setBackground(drawable); // set the new drawable to EditText
    }else{
        yourEditText.setBackgroundDrawable(drawable); // use setBackgroundDrawable because setBackground required API 16
    }