How to change inactive border stroke color of Android Material TextInputLayout component

Question

I am trying to setting up TextInputLayout unfocused border stroke color. For the same, There are too many questions and their answers and I have tried all of them. Like Created styles and used as theme, Created color selector and applied that, and also applied directly app:boxStrokeColor with color selector. But not luck with any of these available solutions.

Not sure, where do i am doing wrong or something i still missing. I pushed my code to Test project to github for to get better visibility of my whole setup. Here is some sample code for quick review:

activity_main.xml (TextInputLayout inside ConstraintLayout)

<com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Tried this as well - app:boxStrokeColor="@color/text_input_box_stroke_color" -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/emailTextInputLayout"
        android:hint="Email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:theme="@style/TextInputLayoutStyle"
        android:layout_marginHorizontal="24dp"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/emailTextInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:importantForAutofill="no"
            android:inputType="textEmailAddress" />

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

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">#FF00CC</item>
        <item name="boxStrokeWidth">2dp</item>
    </style>
</resources>

text_input_box_stroke_color.xml (color selector)

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

It would be great help if someone can provide some guideline and suggestion and help me figure out any mistake made by me.

Thanks in advance.

Answer 1

I have tested your code and it works after you do the below changes:

1.First change your res/color/text_input_box_stroke_color.xml like below to see the different states colors. In the below example i have set a Red color for the focused state and a Light Blue color for default-inactive state:

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

2.Then change your res/values/styles.xml with the boxStrokeColor linking to the above selector like below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@color/text_input_box_stroke_color</item>
        <item name="boxStrokeWidth">2dp</item>
    </style>
</resources>

3.Finally in your TextInputLayout add this style like below:

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

Currently your adding the style like: android:theme="@style/TextInputLayoutStyle" instead of style="@style/TextInputLayoutStyle"

Answer 2

Create a box stroke color for active and inactive state like below: box_stroke_color

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2C2C2C" android:state_focused="true"/>
    <item android:color="#2C2C2C" android:state_hovered="true"/>
    <item android:color="#D7D7D7"/>
</selector>

Make a TextInputLayout style : TextInputLayoutStyle

 <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/box_stroke_color</item>
        <item name="boxStrokeWidth">1dp</item>
    </style>

Use in your TextInputLayout

 <com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayoutStyle" >
    <com.google.android.material.textfield.TextInputEditText.. />
 </com.google.android.material.textfield.TextInputLayout>

Answer 3

Solution for this is next, and this works because I JUST NOW tested it.

Go to your colors.xml inside your res>values folder.

In there you'll have your colorPrimary and other colors you already created before. Scroll to the bottom and add this line:

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">@color/colorPrimary</color>

When you do that, you can just change the color there. I defined as @color/colorPrimary but you can use whatever you want. Before applying this line I got this:

And after applying that line this is the result:

Also I applied style="@style/YourStyle" for both TextInputLayout and TextInputEditText