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

Question

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!

Clerk

try to use set focus method – Lanark

@Lanark I'm not sure what a focus method is, do you have any examples? – Clerk

if you want to make it focused at the beginning you may set attribute – Lanark

setting it to focusable doesn't work :( – Clerk

Sory, I mean the attribute android:focusedByDefault="true" . it will be focused at the begining – Lanark

if you want to change the default color in unfocused mode state see my answer to this question. – Lanark

Answer 1

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"

Lanark

Oh, thank you! This worked for me! If I may ask, how did you find this? – Clerk

@VarunGovind you are welcome, and hope to vote this answer up, it really helps me, for more information you can see this issue discussion in github here and for more default values in color.xml you may visit this or visit for more information. – Lanark

not working for me. it changes color when selected but default color stays black – Aleciaaleck

@akshaybhange you can use override in that command: <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color> – Semitic

How can I set the same programmatically? – Ulphiah

'<color name="mtrl_textinput_default_box_stroke_color">#fff</color>' but this will change all TextInputLayout to white what if i want to change it in a singel activity or fragment ? – Selfcontent

@Selfcontent Did you find a way to change it only in one activity or fragment? Since I also need to change its color only on one screen. – Aztec

Answer 2

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>

Ottava

For everybody that wants to know this can be applied individually to each particular TextInputLayout in your project. Just make separate .xml files for your colors, so text_input_layout_stroke_green, text_input_layout_stroke_yellow, text_input_layout_stroke_red, etc. Then you customise each particular file's colors inside those xml files. Hope it helps someone =) – Doth

not working for matherial theme – Tillietillinger

@AnkitaSingh Are you sure? Which theme are you using in your app? – Ottava

Answer 3

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"
...

Gustative

How to add this selector to the TextInputLayout? – Mastigophoran

For any newbie here, the selector text_input_layout_stroke_color must be created inside res/color, NOT res/drawable – Viola

Answer 4

app:boxStrokeColor="#000000"
app:boxStrokeWidthFocused="0.5dp"
app:boxStrokeWidth="0.5dp"

This will make the box color constant event it is focused!

Ethicize

no, incorrect, it should be different color – Chrysalis