更改 TextInputLayout 轮廓颜色

Change the TextInputLayout outline color

我正在尝试使用 material 样式自定义 TextInputLayout。我设法将聚焦状态设置为我想要的颜色:

正在使用

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

样式所在位置:

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

但是当文本输入没有聚焦时,我会看到这个样子:

如何将黑线的颜色也改成白色?

我创建了默认配置。

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

使用此样式来应用边框颜色和边框宽度,如下所示:

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

从此 link

获取有关样式的其他详细信息

在您的 colors.xml 文件中添加以下行以覆盖 TextInputLayout

的默认颜色
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>

这些项目的版本 1.1.0-alpha02 of the Material Components for Android it works to simply create a ColorStateList。程序如下:

在 res 中创建一个新的资源目录“color”,并在 color 中添加一个名为“text_input_box_stroke.xml”的颜色资源文件 res/color/text_input_box_stroke.xml 放入如下内容:

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

然后在你的 styles.xml 中你会输入:

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

最后说出你的实际风格TextInputLayout:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    ...
<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>

创建颜色目录并在其中创建资源文件 将以上代码粘贴到 color 目录 xml 文件中 并在文本输入布局样式中粘贴以下行

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

从 Material Components Alpha 7 开始,您只需创建一个颜色选择器文件,如下所示: 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>

有关如何设置的更多上下文。这是相关的源代码:

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);
}

从这个列表中您可以看到您希望确保您使用的颜色选择器已定义所有状态,否则它将默认恢复为另一种颜色。

  1. 创建主题并覆盖 "colorOnSurface" 属性。
<style name="AppTheme.LoginScreenTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorOnSurface">#FFF</item>
</style>
  1. 将主题应用于您的登录 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"/>

我正在动态创建我的屏幕。我正在使用 TextInputLayout 并在 TextInputLayout 中创建我的动态编辑文本。如果要给边框TextInputLayout,请按顺序进行以下步骤。

1- 包括 Build.gradle;

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

2- 在 Kotlin 代码中;

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

步骤 1。使用 1.2.0-alpha05 或更高版本

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

第 2 步 - 重要!。确保您的应用主题是或是 Theme.MaterialComponents 的后代。参见 here

设置完成后,所有属性设置都将按预期工作。

步骤 3. 使用 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>
        <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>

Matrial 编辑文本

第 1 步:在 build.gradle(Module App) 模块依赖部分添加库

实施'com.android.support:design:28.0.0-alpha1'

第 2 步:xml代码

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

首先从您的 TextInputLayout 中删除

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

二、添加新的颜色属性

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

一定要写同名mtrl_textinput_default_box_stroke_color不要改

---> 首先自定义样式

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

其次,如果你想为整个应用程序中的所有 TextinputLayout 使用此样式。

因此请将此样式添加到您的父主题中

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

如果您只想为这个特定的输入字段添加

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

第 1 步。将此行添加到您的 colors.xml 文件

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

第 2 步。在 TextInputLayout

中添加此 属性
app:boxStrokeColor="@color/mtrl_textinput_default_box_stroke_color"
<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>

边框颜色:

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

提示颜色:

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

总结

要遵循的步骤

1。为 boxStrokeColor
创建 ColorStateList
<?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。为 android:textColorHint
创建 ColorStateList
<?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。设置视图属性 - 您可以通过 3 种方式执行此操作。
我。使用属性集
<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>
二.使用显式样式
定义自定义样式
<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>
设置样式
<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>
三。使用默认样式属性 - 为 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>

说明

有多种方法可以更改 TextInputLayout 框描边颜色和提示文本颜色。

框轮廓颜色的负责属性是boxStrokeColor。 首先让我们以 xml 格式创建 ColorStateList。创建 Android color 资源目录并创建名为 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>

我参考了 material 设计库的资源。在 material 设计库 https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_stroke_color.xml

中查看这是如何完成的

要更改提示文本颜色,我们必须设置两个属性,

  1. hintTextColor(标签折叠且文本字段处于活动状态时的颜色)
  2. android:textColorHint(所有其他文本字段状态下的标签颜色,例如静止和禁用)

我怎么知道需要更改哪些属性?我检查了主题 Widget.MaterialComponents.TextInputLayout.OutlinedBox 中定义的属性。如果未在子主题中定义,请查看父主题。 https://github.com/material-components/material-components-android/blob/788866e4483621e2222f649e617ee95f7aa9caa6/lib/java/com/google/android/material/textfield/res/values/styles.xml#L88(这在 master 分支中可能有所不同)

app:hintTextColor="?attr/colorSurface"

请注意 hintTextColor 不是有状态的。 但是 android:textColorHint 是有状态的。

让我们为 android:textColorHint 创建自定义 ColorStateList。 提到这个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>

请注意,我使用了?attr/colorSurface,因为通常它的值在浅色主题中为白色,在深色主题中为黑色。如果你不想动态颜色调整,你可以直接使用@android:color/white

有几种方法可以设置方框描边颜色属性值, 使用 context.theme.obtainStyledAttributes() 解析属性值。 如果在多个地方定义了值,则以下顺序决定最终应用哪个属性值。

  1. AttributeSet - 在布局 xml 文件中定义的值。
  2. 样式 - 以显式样式定义的值。 (通过theme.getExplicitStyle(AttributeSet)找回)
  3. defStyleAttr - 默认样式属性,它是视图 class 构造函数的第三个参数。
  4. defStyleRes - 默认样式资源,它是视图 class 构造函数的第四个参数。
  5. Theme - 如果以上所有都没有定义,则解析 theme 属性值。

让我们一一看看

  1. 使用属性集
<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>
  1. 使用显式样式

在 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>

为小部件定义明确的样式

<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>
  1. 使用默认样式属性 - 这用于定义视图的全局样式。你怎么知道需要设置哪个属性?只需检查任何视图构造函数的第三个参数的默认值。对于 material TextInputLayout,此值为 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>
  1. 使用默认样式资源 - 这仅在以编程方式创建小部件时适用。如果检查除 material 设计视图之外的任何视图的构造函数的第四个参数,您可以看到 defStyleRes 参数。如果theme.obtainStyledAttributes()无法通过上述方式解析,则在默认样式资源中查找属性。这不适用于 material 设计库小部件,因为该值在这些小部件中是硬编码的,不会公开以编程方式更改。 (通过theme.applyStyle()内部应用)

  2. 使用应用程序主题 - 这在 material 设计小部件中是不可能的,因为 defStyleRes 在 material 设计小部件中是硬编码的,它优先于应用程序主题属性。

<!-- 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>

以上仅适用于 Android SDK 提供的小部件。