更改TextInputLayout轮廓颜色

问题描述 投票:23回答:5

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

enter image description here

运用

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

但是当textinput没有聚焦时,我得到了这样的表情:

enter image description here

如何将黑线的颜色也改为白色。谢谢

android material-design android-styles android-textinputlayout
5个回答
58
投票

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

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

13
投票

从Android的Material Components版本1.1.0-alpha02开始,它可以简单地为这些项目创建一个ColorStateList。程序如下:

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

3
投票

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

从此列表中,您可以看到要确保使用的颜色选择器已定义所有状态,或者它将默认返回另一种颜色。


2
投票

我创建了一个默认配置。

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

0
投票
<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>
© www.soinside.com 2019 - 2024. All rights reserved.