Material Design TextInputEditText Border Color When Not Activated

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.


I solved this in two main steps:

  1. First problem I had was that the parent style for my TextInputLayout style needed to be changed to Widget.MaterialComponents.TextInputLayout.OutlinedBox.

  2. 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:

enter image description here

Which then turns into this when I tap on it:

enter image description here

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


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