Develop Reference

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

This question already has answers here:
Issue: change border color or box stroke for unfocused TextInputLayout in android
(4 answers)
Closed 2 years ago.
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.

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"

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

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>

TextInputLayout styling

I have problem with my custom TextInputLayout. Here is my code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/phone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/CustomTextInputLayout"
android:hint="#string/phone_number"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:startIconDrawable="#drawable/account"
android:background="#color/bg_light_gray"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/page_description">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeight"
android:background="#color/bg_light_gray"
android:inputType="phone"
android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>
Here is my code from style.xml file
<style name="CustomTextInputLayout" parent="Widget.Design.TextInputLayout">
<item name="errorTextAppearance">#style/ErrorText</item>
<item name="colorControlNormal">#color/green_txt</item>
<item name="colorControlActivated">#color/orange</item>
<item name="colorControlHighlight">#color/orange</item>
</style>
I want to make a baseline color of TextInputLayout to orange, but now it is gray. Also, I place an icon, which has its original color orange, but after placing it became dark gray. Now I am not understanding why it is happening and how to fix this problem. Can someone help me with that?

I want to make base line color of TextInputLayout to orange
Just use a Material theme (for example Widget.MaterialComponents.TextInputLayout.FilledBox) the app:boxStrokeColor attribute to change the color.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/custom_end_icon"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/text_input_selector
where the selector is something like:
<?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="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorAccent"/>
</selector>
Also I place an icon, which has its original color orange, but after placing it became dark gray.
Use the app:endIconTint attribute to apply a color or a color selector to your end icon.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/custom_end_icon"
android:hint="Hint text"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/text_input_selector"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_add_24px"
app:endIconTint="#color/text_input_selector"

Use custom hint text color for hints in enabled and disabled views

I'm trying to add custom styles to a TextInputLayout and TextInputEditText and I´m not able to get the expected results.
What I need is to have a custom color "A" for hints in enabled views and a custom color "B" for hints in disabled views.
Right now I have a style with a selector for hints enabled/disabled. This is the style:
<style name="CustomTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/input_blue</item>
<item name="boxStrokeWidth">2dp</item>
<item name="errorTextAppearance">#style/ErrorText</item>
<item name="android:textColorHint">#color/selector_edithintcolor</item>
</style>
Here is the selector, you can see the color to make the point:
Now some of the components in the layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout_text_disabled"
style="#style/CustomTextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/layout_phone_not_focused">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/txt_text_disabled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_deactivated"
android:inputType="text"
android:text="#string/txt_disabled" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout_text_disabled_hint"
style="#style/CustomTextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/layout_text_disabled">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/txt_text_disabled_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_deactivated"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
Additionally I have a button to change the status of those 2 views from enabled to disabled, here is the behavior:
When views are enabled everything is as expected, hints have the green color as per the selector:
Now when I disable the views, this is what I get:
Any ideas for making the disabled hints be orange as per the selector? Thanks in advance!

Following this link it appears that it is now possible with version 1.2.0-alpha03 of com.google.android.material:material
You need to create a color state list like so :
box_stroke_color_state_list.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?colorPrimary" android:state_enabled="true" />
<item android:color="?colorSecondary" android:state_hovered="true" />
<item android:color="?colorSecondary" android:state_focused="true" />
<!-- This is where the disable hint and box will take it's color -->
<item android:alpha="#dimen/material_emphasis_disabled" android:color="#android:color/holo_green_dark" android:state_enabled="false" />
<item android:color="#color/mtrl_textinput_default_box_stroke_color" />
</selector>
and then call it in your code :
ContextCompat.getColorStateList(context, R.color.box_stroke_color_state_list)?.let {
layout_text_disabled_hint.setBoxStrokeColorStateList(it)
}

Based on the #Caktuspace reply, you can apply in this way:
layout.xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til"
...
android:hint="#string/hello"
android:textColorHint="#color/hint_text_color_textinputlayout">
hint_text_color_textinputlayout.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="#dimen/material_emphasis_disabled" android:color="#color/desiredColorDisabled" android:state_enabled="false" />
<item android:color="#color/desiredColorEnabled" />
</selector>

customize Bounding box stroke in TextInputLayout.OutlinedBox

I'm trying to change box Stroke Color of com.google.android.material.textfield.TextInputLayout while not focused but there is no attribute for that this is my TextInputLayout code
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginTop="38dp"
android:layout_marginEnd="36dp"
android:textColorHint="#color/white"
app:boxStrokeColor="#color/white"
app:boxStrokeWidth="1dp">
<EditText
android:id="#+id/editTxt_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email"
android:inputType="textEmailAddress"
android:textColorHint="#color/white" />
</com.google.android.material.textfield.TextInputLayout>
and I searched for a way to change its color and found this link :
https://github.com/material-components/material-components-android/issues/112
so i tried using this line in my colors file
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>
this solved the problem and changed stroke box color but the issue here is that i want to change this color in other TextInputLayouts in the same app !!

To change the box stroke color just use the app:boxStrokeColor attribute in the xml.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:boxStrokeColor="#color/mySelector"
../>
You should use a selector. It is the default:
<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="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
You can also use a custom style:
<style name="MyOutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_selector</item>
</style>

Issue: change border color or box stroke for unfocused TextInputLayout in android

I have a very specific issue for changing the outline of the textbox for TextInputLayout when it's unfocused. I can't seem to find an attribute to change the color for the border of my "unfocused" text box.
Here's a visual example of what I'm trying to do:
The color of this (textbox):border is not white. currently its not focused.
After I click it, it turns white:
I don't know what I need to change, it doesn't seem like there is an attribute to change it.
I'm also using material design text input layout styles, although I don't see if that will affect it.
Here is my xml code for the text box:
<other layouts ... >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#drawable/item_recycler_view">
<android.support.design.widget.TextInputLayout
android:id="#+id/dialog_text_input_layout"
style="#style/Widget.AppTheme.TextInputLayoutList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Quick Add..."
android:textColorHint="#color/colorWhite"
app:boxStrokeColor="#color/colorWhite"
app:errorEnabled="true"
>
<android.support.design.widget.TextInputEditText
android:id="#+id/dialog_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1"
android:textColor="#color/colorWhite"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
</other layouts...>
And here are the styles that I use for this:
<style name="TextAppearance.AppTheme.TextInputLayout.HintTextAlt" parent="TextAppearance.MaterialComponents.Subtitle2">
<item name="android:textColor">#color/colorWhite</item>
</style>
<style name="Widget.AppTheme.TextInputLayoutList" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/TextAppearance.AppTheme.TextInputLayout.HintTextAlt</item>
<item name="boxStrokeColor">#color/colorWhite</item>
<item name="boxCornerRadiusBottomEnd">5dp</item>
<item name="boxCornerRadiusBottomStart">5dp</item>
<item name="boxCornerRadiusTopEnd">5dp</item>
<item name="boxCornerRadiusTopStart">5dp</item>
<item name="android:layout_margin">5dp</item>
</style>
Thanks, any help or suggestions are welcome!

If you want to set the color for the outline box in unfocused mode instead of the default black, you have to add this line in colors.xml file which will override the default color for the outline box.
copy this line as it is. you can change color to what you want.
<color name="mtrl_textinput_default_box_stroke_color">#fff</color>
until now it will work, for more control on TextInputLayout you may add this style in styles.xml
<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="boxStrokeWidth">2dp</item>
</style>
then add theme to TextInputLayout
android:theme="#style/TextInputLayoutStyle"

With the Material Components Library just use the boxStrokeColor attribute.
It can work with a selector.
Just use something like:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/text_input_layout_stroke_color"
..>
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>

Answer from Amjad was right, but starting from 1.1.0-alpha02 (probably even alpha01) after this issue was resolved it's possible to define color in color state list using the same boxStrokeColor attribute, e.g. how it's done in lib:
<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="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
Usage:
...
app:boxStrokeColor="#color/text_input_layout_stroke_color"
...

app:boxStrokeColor="#000000"
app:boxStrokeWidthFocused="0.5dp"
app:boxStrokeWidth="0.5dp"
This will make the box color constant event it is focused!