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?

Is the View being altered anywhere else in the Java code programmatically? (Other than the xml you listed here) — PGMacDesign, Jan 25 '17 at 18:20
Probably a dumb question, but are you applying the Theme to the relevant Activity (or to the entire project)? It doesn't seem like your style changes are affecting anything if it's not even affecting the TextColor. — LukeWaggoner, Jan 25 '17 at 18:43
@LukeWaggoner not a dumb question :) I added how I apply that theme to the activity to the question. — lostintranslation, Jan 25 '17 at 18:45
What happens, when you apply the style directly to `EditText` in .xml by `android:theme="@style/AppTheme.EditText"?` — R. Zagórski, Jan 25 '17 at 18:46
Sorry the text color does change, I was wrong. The underline color does not. I updated the question. — lostintranslation, Jan 25 '17 at 18:47
Ok, so you're trying to change the color of the line at the bottom of the EditText? The word "underline" was kinda throwing me a bit. — LukeWaggoner, Jan 25 '17 at 18:49
@pRaNaY that leaves the textColor style in the EditText style override and the control color in my AppTheme, meaning same control 2 styles are in 2 different places. Got to be a better way. — lostintranslation, Jan 25 '17 at 19:10
Another option would be to create a theme extending *ThemeOverlay.AppCompat.Light* (or the dark one if you need it): ** and apply it to the desired EditTexts directly using the *android:theme* attribute. — user, Jan 26 '17 at 06:12

Tin Tran · Accepted Answer · 2017-02-01T14:05:28.703

40

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.

edited Feb 01 '17 at 14:05

answered Feb 01 '17 at 13:43

Tin Tran

2,265
1
14
17

Is there a way to apply the EditText theme to all widgets in the app? Setting it in the App Theme maybe? – Ionut Negru Oct 10 '17 at 08:38
You can set the editTextStyle attribute in the theme. By default, it is `@style/Widget.AppCompat.EditText` `@style/Widget.AppCompat.EditText` – Tin Tran Oct 10 '17 at 14:06
I was referring to the a theme that you can apply to an `EditText`. – Ionut Negru Oct 11 '17 at 05:47
Yes. setting it in the app theme will work. Or in other words, setting the app theme atrributes – Tin Tran Oct 11 '17 at 06:17
really it just works with the properties of controls. Thank you! – Paulo Linhares - Packapps Jan 18 '19 at 10:55

score 2 · Answer 2 · answered Feb 01 '17 at 10:50

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

score 1 · Answer 3 · answered Feb 01 '17 at 06:04

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
    }

score 1 · Answer 4 · answered Feb 01 '17 at 11:04

Your style.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="editTextStyle">@style/MyEditTextStyle</item>
</style>

<style name="MyEditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="android:textColor">#FF0</item>
</style>

<style name="AppTheme.MyEditTextTheme">
    <item name="android:textColorHint">#8AFFFFFF</item>

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

Then apply MyEditTextTheme as a theme for your EditText:

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

Now you have yellow underline only at this EditText. Also you can change colorAccent in the MyEditTextTheme, it will not change AppTheme's colorAccent value.

score 0 · Answer 5 · answered Jan 25 '17 at 18:59

0

You can change the color of the underline by doing the following:

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

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

You should really put the item with the android namespace in its own styles-v21.xml file to avoid Android Studio warnings, but it's not 100% necessary. I tested this in an API 19 emulator and it worked just fine, no crashes.

answered Jan 25 '17 at 18:59

LukeWaggoner

8,869
1
29
28

thanks. I do see a problem in that only changes the underline color, but the cursor and cursor pointer are still the accentColor. Which is what colorControlActivated is supposed to change. – lostintranslation Jan 25 '17 at 19:01
of note, if I put colorControlActivated in the AppTheme and not inside the EditText style it works. But then I have styling for that control (text color and control color) in 2 different styles. – lostintranslation Jan 25 '17 at 19:03
Add this: `android:textCursorDrawable="@null"` and it will change the color of the cursor to the text color. – LukeWaggoner Jan 25 '17 at 19:06
If you're setting `accentColor` on your entire project or activity, I believe that that will override your `ColorControlActivated` attribute. Not positive. Try adding 3 copies of your current `colorControl` attributes with the `android` namespace. – LukeWaggoner Jan 25 '17 at 19:10

Cannot set colorControlNormal and android:textColor in style

5 Answers5