更改 TextInputLayout 轮廓颜色
Posted
技术标签:
【中文标题】更改 TextInputLayout 轮廓颜色【英文标题】：Change the TextInputLayout outline color 【发布时间】：2018-11-21 20:44:21 【问题描述】：我正在尝试使用材质样式自定义 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>
但是当文本输入没有聚焦时，我会看到：
如何将黑线的颜色也改为白色？
【问题讨论】：
我们可以在多自动完成文本视图上添加轮廓框吗？ 仅在焦点颜色上使用接受的答案，而不是在控制不集中时改变..它对你有用吗？怎么样？ 【参考方案1】：我创建了一个默认配置。
<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>
【讨论】：
【参考方案2】：使用这种样式来应用边框颜色和边框宽度，如下所示：
<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>
【讨论】：
这会改变焦点模式下的轮廓，但当编辑文本没有焦点时仍然有黑色轮廓 =( @Addev 检查我编辑的答案并在您的 colors.xml 文件中添加颜色。 @RutvikBhatt 谢谢。但 android studio 表示该资源是私有的，可能会在没有通知的情况下消失。有没有更好的解决方案？ @RutvikBhatt 非聚焦模式下的提示文本颜色怎么样？？ @RutvikBhatt 如果我更改了颜色的默认颜色，那么它将更改所有活动中的轮廓框颜色，但我希望为不同的活动使用不同颜色的笔划，那么该怎么办？【参考方案3】：从 Android 的 Material Components 1.1.0-alpha02 版本开始，它可以为这些项目简单地创建一个 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"
...
【讨论】：
这实际上对我使用com.google.android.material:material:1.0.0 有效。但我使用Widget.MaterialComponents.TextInputLayout.OutlinedBox 作为基本样式（不是 Dense）
@VadimKotov 它对我不起作用，使用相同的配置
如何更改 InputBox 的边框，因为它在焦点状态下更粗
完美工作，我在样式中添加了一些其他项目，也可以更改提示颜色等
这必须是预期的方法，而不是覆盖可能停止现有的内部颜色的所有建议【参考方案4】：
<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>
创建颜色目录并在其中创建资源文件 将上述代码粘贴到颜色目录xml文件中 并在文本输入布局样式中粘贴以下行
<item name="boxStrokeColor">@color/focus_tint_list</item>
【讨论】：
【参考方案5】：从 Material Components Alpha 7 开始，您只需创建一个颜色选择器文件，如下所示： 颜色/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);
从此列表中，您可以看到您希望确保使用定义了所有状态的颜色选择器，否则它将默认返回另一种颜色。
【讨论】：
此解决方案存在问题。此选择器不会更改默认颜色。经测试。必须覆盖 mtrl_textinput_default_box_stroke_color。 github.com/material-components/material-components-android/…【参考方案6】：-
创建主题并覆盖“colorOnSurface”属性。
<style name="AppTheme.LoginScreenTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorOnSurface">#FFF</item>
</style>
-
将主题应用于您的登录活动。
<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"/>
【讨论】：
【参考方案7】：我正在动态创建我的屏幕。我正在使用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
【讨论】：
【参考方案8】：第 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_
android:layout_
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_
android:layout_/>
</com.google.android.material.textfield.TextInputLayout>
【讨论】：
第二步真的很重要，谢谢..！【参考方案9】： <com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_
android:layout_
android:hint="Password"
app:boxStrokeColor="#fff"
android:textColorHint="#fff"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/password"
android:layout_
android:layout_
***app:boxStrokeColor="#fff"***
android:inputType="textPassword"
android:textColor="#fff"
/>
</com.google.android.material.textfield.TextInputLayout>
【讨论】：
【参考方案10】：材料编辑文本
第一步：在 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_
android:layout_
app:boxStrokeColor="#0000FF"
app:boxStrokeWidth="2dp"
android:layout_gravity="center"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/txtusername"
android:layout_
android:layout_
android:hint="@string/lable" />
</com.google.android.material.textfield.TextInputLayout>
【讨论】：
【参考方案11】：首先从您的 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不要改
【讨论】：
它对我有用，谢谢【参考方案12】：--->首先自定义样式
<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"
.....>
【讨论】：
【参考方案13】：第 1 步。将此行添加到您的 colors.xml 文件中
<color name="mtrl_textinput_default_box_stroke_color">#4169E1</color>
步骤 2. 在 TextInputLayout 中添加该属性
app:boxStrokeColor="@color/mtrl_textinput_default_box_stroke_color"
【讨论】：
【参考方案14】：<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>
【讨论】：
【参考方案15】：对于边框颜色：
app:boxStrokeColor="@color/gray" //for border color
提示颜色：
app:hintTextColor="@color/puce" //for hint color
【讨论】：
以上是关于更改 TextInputLayout 轮廓颜色的主要内容，如果未能解决你的问题，请参考以下文章
当 enable=true 时 TextInputLayout 轮廓颜色的颜色不同，然后是黑色，启用 false 时比浅灰色
使用 TextInputLayout 时更改 EditText 提示颜色
Android - 如何更改 TextInputLayout（材料组件）中的文本颜色？