Change the TextInputLayout outline color

Question

I'm trying to customize a TextInputLayout with material style. I managed to set the focused state to the colors I want:

Using

<com.google.android.material.textfield.TextInputLayout
     style="@style/LoginTextInputLayoutStyle"
     android:theme="@style/LoginTextInputLayoutStyle"
     android:textColorHint="#fff"
     app:boxStrokeColor="#fff"
     .....>
          <EditText ...

where the style is:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="colorAccent">#fff</item>
</style>

But when the textinput is not focused I get this look:

How can I change the color of the black line to be white too?

using the accepted answer only on focused color changed not when control is not focused.. did it worked for you ? how? — akshay bhange, Mar 28 '19 at 12:18
Thanks for working sample! Applied this and some adjustments and got material theme working. — HX_unbanned, Feb 14 '22 at 16:54

Rutvik Bhatt · Accepted Answer · 2020-03-27T05:05:20.860

175

Use this style to apply border color and border width like this :

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">#fff</item>
    <item name="boxStrokeWidth">2dp</item>
</style>

get Additional details about styling from this link

Add below line in your colors.xml file that overrides default color for TextInputLayout

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>

edited Mar 27 '20 at 05:05

answered Jun 12 '18 at 13:25

Rutvik Bhatt

3,185
1
16
28

10

This changes the outline in focused mode but still have a black outline when the edit text is not focused =( – Addev Jun 12 '18 at 17:02
6

@Addev check my edited answer and add color in your colors.xml file. – Rutvik Bhatt Jun 13 '18 at 05:28
@RutvikBhatt thank you. But android studio says that resource is private and could disappear without notice. There are no better solution? – k4dima Jul 28 '18 at 01:29
1

@RutvikBhatt What about hint text color in non-focused mode?? – Parikshit Chalke Oct 16 '18 at 10:00
@kreker add tools:override="true" in the color tag, to resolve this issue – sunil Oct 19 '18 at 17:05
2

@RutvikBhatt if I changed the default color in color then it will change the outlined box color in all activities but i want different colour of stroke for different activities, Then what to do with it? – Shashwat Gupta Nov 16 '18 at 11:27
As of material library 1.1.0 this answer is no longer the best way. – kroot Dec 17 '18 at 04:52
Is there a way to add a gradient color? – Robert Jan 18 '19 at 00:23
@kroot what is the best way? I'm using 1.1.0-alpha07 – rafael Jun 06 '19 at 21:56
How can I achieve the same `mtrl_textinput_default_box_stroke_color` color override programmatically? – Rohan Taneja Jun 18 '19 at 18:21
Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense: not working in "com.google.android.material:material:1.2.1" – pandey_shubham Feb 03 '21 at 08:53

score 102 · Answer 2 · edited Jul 20 '20 at 23:51

102

As of version 1.1.0-alpha02 of the Material Components for Android it works to simply create a ColorStateList for these items. The procedure is as follows:

Create a new resource directory "color" in res and inside color add a color resource file named "text_input_box_stroke.xml" res/color/text_input_box_stroke.xml put something like the following:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fcc" android:state_focused="true"/>
    <item android:color="#cfc" android:state_hovered="true"/>
    <item android:color="#ccf"/>
</selector>

Then in your styles.xml you would put:

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>

Finally indicate your style for the actual TextInputLayout:

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

edited Jul 20 '20 at 23:51

Jack

1,825
3
26
43

answered Dec 14 '18 at 05:21

kroot

1,962
1
12
10

1

This actually worked for me using `com.google.android.material:material:1.0.0`. But I used `Widget.MaterialComponents.TextInputLayout.OutlinedBox` as a base style (not Dense) – Vadim Kotov Jun 25 '19 at 15:31
@VadimKotov it did not work for me, using the same configurations – Devansh Maurya Jun 27 '19 at 14:39
how to change border with of the InputBox since it's thicker in focus state – Hai Hack Jun 13 '20 at 02:53
Perfectly working, I added some other items to the style, to change also the hint color, etc – Ariel Aug 01 '20 at 05:50
This has to be what was the intended method rather than all the advice to override an internal color that may stop existing – Douglas Jones Dec 18 '21 at 01:05

score 14 · Answer 3 · answered Jun 12 '19 at 12:24

As of Material Components Alpha 7 you simply create a color selector file as so: colors/text_input_outline_color.xml

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

For more context into how this is being set. Here is relevant source code:

ColorStateList boxStrokeColorStateList =
    MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);
if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {
  defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();
  disabledColor =
      boxStrokeColorStateList.getColorForState(new int[] {-android.R.attr.state_enabled}, -1);
  hoveredStrokeColor =
      boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_hovered}, -1);
  focusedStrokeColor =
      boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_focused}, -1);
} else {
  // If attribute boxStrokeColor is not a color state list but only a single value, its value
  // will be applied to the box's focus state.
  focusedStrokeColor =
      a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);
  defaultStrokeColor =
      ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);
  disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);
  hoveredStrokeColor =
      ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);
}

From this list you can see that you want to ensure you are using a color selector with all states defined, or it will default back to another color.

There are issues with this solution. This selector will not change default color. Tested. Had to override mtrl_textinput_default_box_stroke_color. https://github.com/material-components/material-components-android/issues/593 — Johnny Five, Nov 26 '20 at 12:48

score 5 · Answer 4 · answered Feb 28 '19 at 15:34

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

<item android:state_focused="false" android:color="#FFFFFF"/></selector>

create the color directory and inside that create a resource file paste the above code in color directory xml file and in text input layout style paste the below line

<item name="boxStrokeColor">@color/focus_tint_list</item>

score 5 · Answer 5 · answered May 20 '20 at 01:58

Matrial Edit Text

Step 1: Add library in build.gradle(Module App) module dependency section

implementation 'com.android.support:design:28.0.0-alpha1'

Step 2 : xml Code

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:boxStrokeColor="#0000FF"
            app:boxStrokeWidth="2dp"
            android:layout_gravity="center"
            >

           <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/txtusername"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/lable" />

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

score 5 · Answer 6 · answered Jul 19 '20 at 18:25

First Remove from your TextInputLayout

<item name="boxStrokeColor">@color/YourColor</item>

Second, add a new color attribute

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

Must write the same name mtrl_textinput_default_box_stroke_color do n't change

score 4 · Answer 7 · edited Dec 26 '19 at 12:00

I'm creating dynamically my screen. I'm using TextInputLayout and create my dynamic edit text in TextInputLayout. If you want to give TextInputLayout to the border, do the following steps in order.

1- include Build.gradle;

implementation 'com.google.android.material:material:1.0.0'

2- in Kotlin code;

val textInputLayout = TextInputLayout(this)
        textInputLayout.apply {
            boxStrokeColor = Color.parseColor("#E68A06")
            setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE)
            setHintTextAppearance(R.style.ValidatableInputLayoutStyle_OutlineBox_HintInputLayoutStyle)
            setBoxCornerRadii(16f, 16f, 16f, 16f)
            setPadding(4, 0, 0, 0)
        }

3- style.xml

<style name="ValidatableInputLayoutStyle.OutlineBox.HintInputLayoutStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">14sp</item>

My Component image link

score 3 · Answer 8 · answered Jun 12 '18 at 12:49

I created a default config.

 <style name="Widget.Design.TextInputLayout" parent="AppTheme">
    <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
    <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
    <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
    <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
</style>

<style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
    <!-- Floating label appearance here -->
    <item name="android:textColor">@color/colorAccent</item>
    <item name="android:textSize">20sp</item>
</style>

<style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
    <!-- Error message appearance here -->
    <item name="android:textColor">#ff0000</item>
    <item name="android:textSize">20sp</item>
</style>

score 2 · Answer 9 · edited Mar 27 '20 at 07:52

Create a Theme and override "colorOnSurface" attr.

<style name="AppTheme.LoginScreenTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorOnSurface">#FFF</item>
</style>

Apply the theme to your login activity.

<activity
    android:name=".login.ui.login.LoginActivity"
    android:label="@string/title_activity_login"
    android:launchMode="singleInstance"
    android:screenOrientation="portrait"
    android:theme="@style/AppTheme.LoginScreenTheme"
    android:windowSoftInputMode="adjustResize|stateHidden"/>

arsent · Answer 10 · 2020-03-17T15:09:32.680

Step 1. Use 1.2.0-alpha05 or later

implementation 'com.google.android.material:material:1.2.0-alpha05'

Step 2 - Important!. Make sure your app theme is or is a descendant of Theme.MaterialComponents. See here

Once that's set all attribute setting work as expected.

Step 3. Use the attribute setting from the specification

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/filledTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label_text"
    app:helperTextEnabled="true"
    app:helperText="@string/helper_text"
    app:counterEnabled="true"
    app:counterMaxLength="20"
    app:startIconContentDescription="@string/leading_icon_content_desc"
    app:startIconDrawable="@drawable/baseline_favorite_24">

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

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

Step 2 is really very important, Thank you..! – Vikram Kodag Aug 25 '20 at 10:50 — Vikram Kodag, Aug 25 '20 at 10:50

score 2 · Answer 11 · answered May 10 '20 at 13:29

        <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        app:boxStrokeColor="#fff"
        android:textColorHint="#fff"
        app:passwordToggleEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ***app:boxStrokeColor="#fff"***
            android:inputType="textPassword"
            android:textColor="#fff"
            />
    </com.google.android.material.textfield.TextInputLayout>

score 2 · Answer 12 · answered May 21 '21 at 16:59

2

Step 1. add this line to your colors.xml file

<color  name="mtrl_textinput_default_box_stroke_color">#4169E1</color>

Step 2. add this property in TextInputLayout

app:boxStrokeColor="@color/mtrl_textinput_default_box_stroke_color"

answered May 21 '21 at 16:59

Akshay Rajput

173
1
6

score 1 · Answer 13 · answered Apr 18 '22 at 12:05

Summary

Steps to follow

1. Create `ColorStateList` for `boxStrokeColor`

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorSurface" android:state_focused="true" />
    <item android:alpha="0.87" android:color="?attr/colorSurface" android:state_hovered="true" />
    <item android:alpha="0.12" android:color="?attr/colorSurface" android:state_enabled="false" />
    <item android:alpha="0.38" android:color="?attr/colorSurface" />
</selector>

2. Create `ColorStateList` for `android:textColorHint`

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.38" android:color="?attr/colorSurface" android:state_enabled="false" />
    <item android:alpha="0.6" android:color="?attr/colorSurface" />
</selector>

3. Set view attributes - There are 3 ways that you can do this.

I. Using attribute set

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:textColorHint="@color/text_color_hint"
    app:boxStrokeColor="@color/box_stroke_color"
    app:hintTextColor="?attr/colorSurface">

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

II. Using explicit style

Define custom style

<style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/box_stroke_color</item>
    <item name="hintTextColor">?attr/colorSurface</item>
    <item name="android:textColorHint">@color/text_color_hint</item>
</style>

Set style

<com.google.android.material.textfield.TextInputLayout
    style="@style/CustomTextInputStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password">

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

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

III. Using default style attribute - set global style for `TextInputLayout`

<!-- Base application theme. -->
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    ...
    <!-- Status bar color. -->
    ...

    <!-- Customize your theme here. -->
    <item name="textInputStyle">@style/CustomTextInputStyle</item>
</style>

Explanation

There are various ways to change TextInputLayout box stroke color and hint text color.

The responsible attribute for box outline color is boxStrokeColor. First let's create ColorStateList in xml format. Create Android color resource directory and create new resource file named box_stroke_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorSurface" android:state_focused="true" />
    <item android:alpha="0.87" android:color="?attr/colorSurface" android:state_hovered="true" />
    <item android:alpha="0.12" android:color="?attr/colorSurface" android:state_enabled="false" />
    <item android:alpha="0.38" android:color="?attr/colorSurface" />
</selector>

I referred resources of material design library. See how this is done in material design library https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_stroke_color.xml

To change hint text color, we have to set two attributes,

hintTextColor (The color of the label when it is collapsed and the text field is active)
android:textColorHint (The color of the label in all other text field states, such as resting and disabled)

How do I know which attributes are required to change? I checked attributes defined in theme Widget.MaterialComponents.TextInputLayout.OutlinedBox. Look at parent theme if not defined in the child theme. https://github.com/material-components/material-components-android/blob/788866e4483621e2222f649e617ee95f7aa9caa6/lib/java/com/google/android/material/textfield/res/values/styles.xml#L88 (This may vary in master branch)

app:hintTextColor="?attr/colorSurface"

Note that hintTextColor is not stateful. But android:textColorHint is stateful.

Let's create custom ColorStateList for android:textColorHint. Referred this https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.38" android:color="?attr/colorSurface" android:state_enabled="false" />
    <item android:alpha="0.6" android:color="?attr/colorSurface" />
</selector>

Note that I have used ?attr/colorSurface, because generally it's value is white in light theme and black in dark theme. You could use @android:color/white directly if you don't want dynamic color adjustments.

There are several ways that you can set box stroke color attribute value, Attribute values are resolved using context.theme.obtainStyledAttributes(). If value is defined in multiple places, the following order determines which attribute value is ultimately applied.

AttributeSet - Value defined in layout xml file.
Style - Value defined in explicit style. (Retrieve it through theme.getExplicitStyle(AttributeSet))
defStyleAttr - Default style attribute, which is the third argument of view class constructor.
defStyleRes - Default style resource, which is the fourth argument of view class constructor.
Theme - If not defined in all of the above, theme attribute value is resolved.

Let's see them one by one

Using AttributeSet

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:textColorHint="@color/text_color_hint"
    app:boxStrokeColor="@color/box_stroke_color"
    app:hintTextColor="?attr/colorSurface">

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

Using explicit style

Define custom style in styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/box_stroke_color</item>
        <item name="hintTextColor">?attr/colorSurface</item>
        <item name="android:textColorHint">@color/text_color_hint</item>
    </style>
    
</resources>

Define explicit style for the widget

<com.google.android.material.textfield.TextInputLayout
    style="@style/CustomTextInputStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password">

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

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

Using default style attribute - This is used to define global style for a view. How do you know which attribute is required to set? Just check default value of third argument of any view constructor. For material TextInputLayout this value is com.google.android.material.R.attr.textInputStyle.

<!-- Base application theme. -->
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    ...
    <!-- Status bar color. -->
    ...

    <!-- Customize your theme here. -->
    <item name="textInputStyle">@style/CustomTextInputStyle</item>
</style>

Using default style resource - This is only applicable when creating widgets programmatically. If you check fourth argument of the constructor of any view except material design views, you can see defStyleRes parameter. If theme.obtainStyledAttributes() cannot resolve from the above ways, then it looks for attribute in default style resource. This is not applicable in material design library widgets, because this value is hard coded in those widgets and not exposed to change programmatically. (It is internally applied through theme.applyStyle())
Using app theme - This is not possible in material design widgets, because defStyleRes is hard coded in material design widgets and it takes precedence over app theme attributes.

<!-- Customize your theme here. -->
<item name="boxStrokeColor">@color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">@color/text_color_hint</item>

Above is only applicable in Android Sdk provided widgets.

score 0 · Answer 14 · answered Sep 08 '20 at 19:31

---> First customize style

 <style name="Widget.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxStrokeColor">?attr/colorSecondary</item>
    <item name="hintTextColor">?attr/colorSecondary</item>
</style>

Second If you want to this style for all TextinputLayout in whole app.

so add this style to your parent theme

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorSecondary">@color/colorSecondary</item>
    <item name="colorSecondaryVariant">@color/colorSecondaryVariant</item>
    <item name="android:textColorPrimary">@color/textColorPrimary</item>
    <item name="textInputStyle">@style/Widget.TextInputLayout.FilledBox</item>
</style>

If you just want to add only for this particular input field

<com.google.android.material.textfield.TextInputLayout
 style="@style/Widget.TextInputLayout.FilledBox"
 
 .....>

score 0 · Answer 15 · answered Jul 23 '21 at 07:22

<style name="VerifyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/colorWhite</item>
    <item name="boxStrokeWidth">2dp</item>
    <item name="colorOnSurface">@color/colorPrimary</item>
    <item name="colorPrimary">@color/colorWhite</item>
</style>

score 0 · Answer 16 · edited Nov 30 '21 at 14:20

0

For the border color:

 app:boxStrokeColor="@color/gray" //for border color

For the hint color:

 app:hintTextColor="@color/puce" //for hint color

edited Nov 30 '21 at 14:20

ouflak

2,458
10
44
49

answered Nov 30 '21 at 13:26

Kinza

1
1

sandeepani · Answer 17 · 2023-02-17T06:02:10.300

This worked for me:

        <com.google.android.material.textfield.TextInputLayout
            android:textAppearance="?attr/textAppearanceBody2"
            style="@style/LoginTextInputLayoutStyle"
            android:theme="@style/LoginTextInputLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp">
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/txtUserName"
                android:padding="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:textColor="#FFFFFF"
                android:textColorHint="#FFFFFF"
                android:textColorHighlight="#FFFFFF"
                android:shadowColor="#FFFFFF"
                android:outlineAmbientShadowColor="#FFFFFF"
                android:outlineSpotShadowColor="#FFFFFF"
                android:hint="Email"
                android:textSize="@dimen/textxhdpi"/>
        </com.google.android.material.textfield.TextInputLayout>

In the Styles:

<resources
xmlns:app="http://schemas.android.com/apk/res-auto">
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <item name="textAppearanceBody2">@style/TextAppearance.neurosales.Body2</item>
</style>

<style name="TextAppearance.neurosales.Body2" parent="TextAppearance.MaterialComponents.Body2">
<item name="colorAccent">@color/white</item>
<item name="android:textColorHint">@color/white</item>
<item name="colorControlNormal">@color/white</item>
<item name="colorControlActivated">@color/white</item>
<item name="colorControlHighlight">@color/white</item>
  <item name="android:textColor">@color/white</item>
</style>

<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">#fff</item>
    <item name="android:textColorHint">#fff</item>
    <item name="app:hintTextColor">#fff</item>
</style>

In Color:

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>

score 0 · Answer 18 · answered Aug 07 '23 at 11:13

Despite being late, I hope this solution still helps you.

Create a Color Resource file (I've named it "col_str") in the res>color folder. Don't forget to create a folder named "Color" in the res folder if one does not exist.

col_str :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/darker_gray" android:state_focused="false"/>
    <item android:color="@android:color/black" android:state_focused="true"/>
</selector>

In your XML file :

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Your Hint"
    app:boxStrokeColor="@color/col_str">

    <com.google.android.material.textfield.TextInputEditText
        style="@style/Widget.Material3.TextInputEditText.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@android:color/black"
        android:textSize="14sp" />

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

Change the TextInputLayout outline color

18 Answers18

Summary

Steps to follow

1. Create `ColorStateList` for `boxStrokeColor`

2. Create `ColorStateList` for `android:textColorHint`

3. Set view attributes - There are 3 ways that you can do this.

I. Using attribute set

II. Using explicit style

Define custom style

Set style

III. Using default style attribute - set global style for `TextInputLayout`

Explanation

Linked

Change the TextInputLayout outline color

18 Answers18

Summary

Steps to follow

1. Create ColorStateList for boxStrokeColor

2. Create ColorStateList for android:textColorHint

3. Set view attributes - There are 3 ways that you can do this.

I. Using attribute set

II. Using explicit style

Define custom style

Set style

III. Using default style attribute - set global style for TextInputLayout

Explanation

Linked

1. Create `ColorStateList` for `boxStrokeColor`

2. Create `ColorStateList` for `android:textColorHint`

III. Using default style attribute - set global style for `TextInputLayout`