Change the TextInputLayout outline color Change the TextInputLayout outline color android android

Change the TextInputLayout outline color


Use this style to apply border color and border width like this :

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">    <item name="boxStrokeColor">#fff</item>    <item name="boxStrokeWidth">2dp</item></style>

get Additional details about styling from this link

Add below line in your colors.xml file that overrides default color for TextInputLayout

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>


As of version 1.1.0-alpha02 of the Material Components for Android it works to simply create a ColorStateList for these items. The procedure is as follows:

Create a new resource directory "color" in res and inside color add a color resource file named "text_input_box_stroke.xml" res/color/text_input_box_stroke.xml put something like the following:

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="#fcc" android:state_focused="true"/>    <item android:color="#cfc" android:state_hovered="true"/>    <item android:color="#ccf"/></selector>

Then in your styles.xml you would put:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">    <item name="boxStrokeColor">@color/text_input_box_stroke</item></style>

Finally indicate your style for the actual TextInputLayout:

<com.google.android.material.textfield.TextInputLayout    android:id="@+id/my_layout_id"    style="@style/LoginTextInputLayoutStyle"    ...


As of Material Components Alpha 7 you simply create a color selector file as so:colors/text_input_outline_color.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:color="@color/buttonDark"/>    <item android:state_hovered="true" android:color="@color/buttonDark"/>    <item android:state_focused="true" android:color="@color/buttonDark"/>    <item android:color="@color/buttonDark"/></selector>

For more context into how this is being set. Here is relevant source code:

ColorStateList boxStrokeColorStateList =    MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {  defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();  disabledColor =      boxStrokeColorStateList.getColorForState(new int[] {-android.R.attr.state_enabled}, -1);  hoveredStrokeColor =      boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_hovered}, -1);  focusedStrokeColor =      boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_focused}, -1);} else {  // If attribute boxStrokeColor is not a color state list but only a single value, its value  // will be applied to the box's focus state.  focusedStrokeColor =      a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);  defaultStrokeColor =      ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);  disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);  hoveredStrokeColor =      ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);}

From this list you can see that you want to ensure you are using a color selector with all states defined, or it will default back to another color.