how to change the color of outline or border of textInputLayout not focused?

Viewed 6784

I am tring to change the color of outline or border of the textInputLayout, I dont know why its not changeing, I search and find some solutions but didnt work for me.

here I put the style and then apply it in the textInputLayout

<style name="WhiteOutlineBox" parent="Widget.MaterialComponents.TextInputLayout.OutlineBox">
    <item name="boxStrokeColor">@color/snow </item>
    <item name="hintTextAppearance">@style/TextLabel</item>
    <item name="android:textColorHint">@color/snow</item>
    <item name="passwordToggleTint">@color/snow</item>

    <item name="colorControlNormal">@color/snow</item>
    <item name="colorControlActivated">@color/snow</item>
    <item name="colorControlHighlight">@color/snow</item>
    <item name="colorPrimary">@color/snow</item>
    <item name="colorPrimaryDark">@color/snow</item>
    <item name="colorAccent">@color/snow</item>

</style>

<!--  this style for the hint text lable in textInputLayout -->
<style name="TextLabel" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/snow</item>
</style>

here the code of appling it in textInputLayout in xml

<android.support.design.widget.TextInputLayout
            android:id="@+id/ed_oldPass"
            style="@style/WhiteOutlineBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginEnd="32dp"
            android:layout_marginTop="50dp"
            app:passwordToggleEnabled="true">

            <android.support.design.widget.TextInputEditText
                style="@style/WhiteOutlineBox"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="@color/snow"
                android:textColor="@color/snow"
                android:layout_marginBottom="10dp"
                android:hint="@string/old_pass_ed_hint"
                android:inputType="textPassword"
                android:paddingEnd="10dp"
                android:paddingStart="10dp" />
        </android.support.design.widget.TextInputLayout>

the stroke color, hintTextAppearence, hint color and pass toggle tint color changed but others no ,what I want is changing the color of border when its not focused how to do that? please help and thanks in advance

3 Answers

There is a problem if one wants to change just one TextInputLayout programmatically, the problem is the property defaultStrokeColor is not accessible, the only way to change it is through overriding the colour mtrl_textinput_default_box_stroke_color or uses a state list colour but in both cases, you need the styles on XML.

In another hand, the property focusedStrokeColor is accessible through setBoxStrokeColor, so it is possible to change it programmatically without any special code.

A solution for it, if reflection is an option for you, of course, is to change the accessibility of the property in run-time, the following code does the job on material-1.1.0:

fun TextInputLayout.setDefaultStrokeColor(
    color: Int
) {
    try {
        val defaultStrokeColor = TextInputLayout::class.java.getDeclaredField("defaultStrokeColor")
        defaultStrokeColor.isAccessible = true
        defaultStrokeColor.set(this, color)
    } catch (e: NoSuchFieldException) {
        // failed to change the color
    }
}

uses it as an extension function:

yourView.setDefaultStrokeColor(yourColor)

You can use the boxStrokeColor attribute.It can work with a selector.

Use something like:

    <com.google.android.material.textfield.TextInputLayout
        app:boxStrokeColor="@color/text_input_layout_stroke_color"
        ..>

or

<style name="WhiteOutlineBox" parent="Widget.MaterialComponents.TextInputLayout.OutlineBox">
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
</style>

with:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="..." android:color="@color/...." android:state_focused="true"/>
  <item android:alpha="..." android:color="@color/...." android:state_hovered="true"/>
  <item android:alpha="..." android:color="@color/...." android:state_enabled="false"/>
  <item android:alpha="..." android:color="@color/...."/>  <!-- unfocused -->
</selector>

enter image description here
enter image description here
enter image description here

add this to your color.xml

<color name="mtrl_textinput_default_box_stroke_color">#BDC3C7</color>

it overrides default unfocused outline color

Related