Border around TextInputLayout view border disappears when I enable it

Question

What I want to happen is for a an input layout when I set its error to enabled is for the filled color to turn a light shade of red and the border to be a darker shade.

But what I end up with is that light shade but without the borders whats so ever.

This is my layput

        <android.support.design.widget.TextInputLayout
        android:id="@+id/five_star_review_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true"
        app:hintEnabled="false"
        app:errorTextAppearance="@style/ErrorTextFiveStar"
        android:importantForAccessibility="no"
        android:labelFor="@+id/add_number"
        tools:error="true">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/five_star_review_text"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/border"
            android:padding="13dp"
            style="@style/StarRatingInputTextStyle"
            tools:text="I really like the video layout. It was easy to understand, and very intuitive. The invitation via email" />

This is my code to do it.

 five_star_review_text.addTextChangedListener(object : TextWatcher{
        override fun afterTextChanged(s: Editable?) {
        }

        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
        }

        override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
            if (s.length > 100) {
                five_star_review_layout.error = " "
                five_star_review_layout.boxStrokeColor= ContextCompat.getColor(activity!!, R.color.error_box_selector)
            }
            else {
                five_star_review_layout
                    .error =""
                five_star_review_layout.boxStrokeColor = ContextCompat.getColor(activity!!, R.color.error_box_selector)
            }
            if ((100 - s.length) > 0) {
                val counter = "+${100 - s.length}"
                review_counter.text = counter
                review_counter.setTextColor(ContextCompat.getColor(activity!!, R.color.black))
            } else {
                review_counter.text ="${100 - s.length}"
                review_counter.setTextColor(ContextCompat.getColor(activity!!, R.color.kp_red))
            }
        }

    })

This is my selector

<?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/kp_red"/>
    <item android:state_hovered="true" android:color="@color/kp_red"/>
    <item android:state_focused="true" android:color="@color/kp_red"/>
    <item android:color="@color/kp_red"/>
</selector>

Answer 1

To define the stroke color on error you can use the boxStrokeErrorColor attribute. Also you can use the app:counterEnabled and app:counterMaxLength attributes to automatically detect a text too long.

<com.google.android.material.textfield.TextInputLayout
        app:boxStrokeErrorColor="@color/...."
        app:counterEnabled="true"
        app:counterMaxLength="100"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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

If you want to change also the background color you can use the methods

• textInputLayout.setBoxBackgroundColor
• textInputLayout.setBoxBackgroundColorStateList
• textInputLayout.setBoxBackgroundColorResource

Note: this requires the version 1.2.0 (currently 1.2.0-beta01).