Material Design TextInputEditText Border Color When Not Activated

Question

I'm placing a TextInputEditText widget onto a white background. When the fragment first loads, the widget does not have focus. The border around the widget is white (or almost white), so it is invisible on a white background. Here is a screenshot of that widget, drawn on a black background for contrast:

As soon as I tap on the widget, the border becomes that of my primary color, which is exactly what I want. Here is a similar screenshot after the widget is activated.

I'm trying to control these colors through a style, and I've tried everything that I can think of, but I cannot figure out how to adjust that color. Here is my style (feel free to laugh at the various attempts):

<style name="MyTextInputLayout" parent="Base.Widget.MaterialComponents.TextInputLayout">
    <item name="android:colorBackground">@android:color/black</item>
    <item name="android:textColorHint">@color/colorPrimary</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
    <item name="android:colorControlActivated">@android:color/black</item>
    <item name="android:colorControlNormal">@android:color/black</item>
    <item name="android:colorControlHighlight">@android:color/black</item>
    <item name="android:backgroundTint">@android:color/black</item>
    <item name="android:colorAccent">@android:color/black</item>
</style>

<style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:colorBackground">@android:color/black</item>
    <item name="android:colorControlActivated">@android:color/black</item>
    <item name="android:colorControlNormal">@android:color/black</item>
    <item name="android:colorControlHighlight">@android:color/black</item>
    <item name="android:backgroundTint">@android:color/black</item>
    <item name="android:colorAccent">@android:color/black</item>
</style>

And finally, the xml of the layout in case it is helpful:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@style/MyTextInputLayout">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/reg_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username"
        style="@style/MyTextInputEditText"/>

</com.google.android.material.textfield.TextInputLayout>

How can I change this border color when the widget is not active (i.e. does not have focus)?

have you tried giving `textInputLayout` properties to `textInputEditText` ? like `MaterialComponents.TextInputLayout.OutlinedBox.Dense` — Umair, Nov 21 '18 at 05:05
try setting below properties `#c5c5c5 @color/accent @color/accent` to theme. — karan, Nov 21 '18 at 05:06
check this answer https://stackoverflow.com/a/50818399/7666442 — AskNilesh, Nov 21 '18 at 05:31

score 26 · Accepted Answer · answered Nov 21 '18 at 06:06

I solved this in two main steps:

First problem I had was that the parent style for my TextInputLayout style needed to be changed to Widget.MaterialComponents.TextInputLayout.OutlinedBox.
Once I figured that out, I traced through the Android xml for that style and got to a file called mtrl_box_stroke_color.xml. This is a selector where the three colors for the standard TextInputLayout border are declared. That file looks like this:

So I copied that and created my own file in the res/color folder that I called edit_text_box_border.xml. I modified the three colors to suit my purposes, ultimately coming up with this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorPrimary" android:state_focused="true"/>
    <item android:alpha="0.87" android:color="@color/colorPrimary" android:state_hovered="true"/>
    <item android:alpha="0.12" android:color="@color/colorPrimary" android:state_enabled="false"/>
    <item android:alpha="0.38" android:color="@color/colorPrimary"/>
</selector>

Then, back in my style, I had to get rid of my many color attempts and add an item for boxStrokeColor that pointed to this file. Here are both styles:

<style name="MyTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:textColorHint">@color/colorPrimary</item>
        <item name="android:paddingStart">16dp</item>
        <item name="android:paddingEnd">16dp</item>
        <item name="boxStrokeColor">@color/edit_text_box_border</item>
    </style>

    <style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
        <item name="android:textColor">@android:color/black</item>
    </style>

Now, when I run the app, I start out with this:

Which then turns into this when I tap on it:

That's what I was going for, so problem solved. Hope this helps someone.

This will change the color of all TextImputs in the whole application — Oscar Méndez, Dec 26 '18 at 07:29
I got an error on running this "The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant)." . what is the solution — Pooja Rajendran C, Mar 23 '20 at 05:47
this method not working for implementation 'com.google.android.material:material:1.2.1' — Prabhakaran P, Oct 09 '20 at 08:02

score 9 · Answer 2 · answered Nov 21 '18 at 05:43

9

1.

<com.google.android.material.textfield.TextInputLayout
 ...
 style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
 app:boxStrokeColor = "@android:color/holo_purple"  
 //border color when in active status
 ...

2. add the following in colors.xml file

<color name="mtrl_textinput_default_box_stroke_color">#00ff00</color> //border color when in inactive status

answered Nov 21 '18 at 05:43

navylover

12,383
5
28
41

1

Thanks. Not sure if this would work, but if it does, I would have to apply it to every TextInputLayout individually. My question is about how to do this in a theme. – AndroidDev Nov 21 '18 at 06:09
you just saved my day!! – Kartik Garasia Dec 27 '19 at 14:22
Keep in mind your activity/app theme needs to be `Theme.MaterialComponents.` and not `AppCompat` – M.Baraka Jan 08 '21 at 23:01

score 1 · Answer 3 · answered May 21 '21 at 09:29

Add

        app:boxStrokeColor="@color/black"
        app:hintTextColor="@color/black"

to your XML file. I tried all the color options. You can replace the "@color/black" with any color HEX code. Also write app:color and android will show you all the color options, there are many color fields that can be changed, like the error field which we can set to red to indicate the user has entered Invalid Data.

Paktalin · Answer 4 · 2019-10-17T16:44:19.007

In case you need to change the outline color dynamically (for automatic field validation, for example) you can use the following hack:

Set

app:errorTextColor="@color/colorAccepted"
app:errorIconTint="@color/colorAccepted"

for TextInputLayout in xml.

Then in code:

text_input_layout.errorIconDrawable = null to remove the error icon

and text_input_layout.error = " " to enable the coloring or text_input_layout.error = null to disable it.

This way TextInputLayout takes more space. To resolve this you can customize the errorTextAppearance by defining your own style:

<style name="ErrorTextStyle" parent="TextAppearance.MaterialComponents.Caption">
        <item name="android:textSize">0sp</item>
</style>

Note: That's clearly a hack rather than a proper solution.

score -1 · Answer 5 · answered Dec 28 '19 at 09:13

I use this:

<style name="TextInputLayoutTheme" parent="TextAppearance.AppCompat">
    <item name="android:textColorHint">@color/secondaryTextLight</item>
    <item name="android:backgroundTint" tools:targetApi="lollipop">@color/colorAccent</item>
    <item name="android:textColor">@color/white</item>
    <item name="colorControlActivated">@color/colorAccent</item>
</style>

and in the xml:

<com.google.android.material.textfield.TextInputEditText
                style="@style/TextInputLayoutTheme"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

Material Design TextInputEditText Border Color When Not Activated

5 Answers5