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:
First problem I had was that the parent style for my
TextInputLayout
style needed to be changed toWidget.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.
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