如何更改TextinputLayout标签的颜色和android下划线的edittext


120

我正在使用android设计库的TextinputLayout。但是,不能自定义提示颜色,标签颜色的下划线颜色EditText里面TextinputLayout。请帮忙。


1
根据设计指南,它应该具有强调色吗?
Raghunandan

是的,但是我将有许多editTexts的颜色与主题的强调色不同。
Nitesh Verma,2015年


在此处检查我的答案以更改标签颜色
Summved Jain

Answers:


255

更改底线颜色:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

有关更多信息,请检查此线程

浮动时更改提示颜色

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

并像这样使用它:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

不是浮动标签时更改提示颜色:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

感谢@AlbAtNf


我无法更改提示颜色(当其没有标签时)。您能帮忙吗?
Nitesh Verma,2015年

我真的很担心我的应用程序大小,考虑到这个问题,我希望对应用程序增加多少大小?
Nitesh Verma

抱歉,没有收到您的问题,请解释更多信息,大小在什么情况下,应用程序重量的图形大小(例如apk在20mb以上),更早的时候您接受我的回答,然后再次删除您的接受,请问,是吗?
Pankaj Arora 2015年

becoz,根据您的回答,我无法更改提示颜色。它的某些部分对我有用,但这并不是我所要求的完整解决方案。关于应用程序大小,是否不添加Material EdiTText这样的外部库会增加应用程序大小?
Nitesh Verma,2015年

4
@NiteshVerma找到了一种设置提示颜色的解决方案,当它不是浮动标签时:只需将其设置android:textColorHintTextInputLayoutXML。
AlbAtNf

30

根据Fedor Kazakov和其他答案,我创建了一个默认配置。

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</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>

</resources>

activity_layout.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

</android.support.design.widget.TextInputLayout>

重点:

专心

没有重点:

没有重点

错误信息:

在此处输入图片说明


8
为了使“无焦点”示例也变粉红色,该怎么办?
约翰·史密斯

如何使用这种风格?
Hanzala

23

借助材料组件库,您可以使用com.google.android.material.textfield.TextInputLayout

您可以应用自定义样式来更改颜色。

要更改提示颜色,您必须使用以下属性:
hintTextColorandroid:textColorHint

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</item>
</style>

您应该使用的选择器android:textColorHint。就像是:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

要更改底线颜色,您必须使用属性:boxStrokeColor

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

同样在这种情况下,您应该使用选择器。就像是:

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

在此处输入图片说明 在此处输入图片说明

您还可以在布局中应用以下属性:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

1
如何在TextinputLayout中更改EditText的下划线颜色?我的意思是不专心的状态。它是灰色的
叶甫Vorobei

@EvgeniiVorobei在答案中有描述。由定义boxStrokeColor。在该示例中selector_stroke_color,尤其是最后一行:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
Gabriele Mariotti

太谢谢你了!我自己弄不清楚。
Evgenii Vorobei

19

将此属性添加到Edittext标记中,即可享受:

 android:backgroundTint="@color/colorWhite"

5
效果:更改API级别为21和更高的设备上的线条颜色
某处某人某人

17

博客文章介绍的各种造型方面EditText,并AutoCompleteTextView通过包裹TextInputLayout

对于EditTextAppCompat lib 22.1.0+,您可以使用一些与主题相关的设置来设置主题属性:

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

并将它们应用于EditText

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

对于AutoCompleteTextView事情比较复杂,因为它包装TextInputLayout和应用这个主题游浮动标签的行为。您需要在代码中解决此问题:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

并在Activity.onCreate

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});

8

如果你想改变酒吧/线条颜色提示文本颜色TextInputLayout(什么口音的颜色通常是),然后就创建这个风格:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

然后将其TextInputLayout作为主题应用

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

这基本上将一个主题(不是样式)设置为一个视图(而不是整个活动)。


您的Min SDK应该为21
Azizjon Kholmatov '19

5
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

您可以覆盖此样式进行布局

而且您也可以更改内部EditText-item样式。


如何使用这种风格?有什么方法可以在一处覆盖所有应用程序的样式?
汉扎拉

5
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

将此样式应用于TextInputLayout


2
只是将样式应用于TextInputLayout的简要说明:android:theme="@style/EditScreenTextInputLayoutStyle"
jackycflau

5

正如Dimitrios Tsigouris他的博客文章中很好地描述TextinputLayoutLayout,A 不是观点,而是a 。因此,您不需要仅用于的,而使用。在博客文章之后,我得到了以下解决方案:StyleViewsTheme

开始在styles.xml

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

并在您的布局中添加

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

在父项中使用Widget.MaterialComponents.TextInputLayout.OutlinedBox
Sudip Sadhukhan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.