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

问题描述 投票:96回答:7

我正在使用android设计库的TextinputLayout。但是无法在EditText中自定义TextinputLayout的提示颜色,标签颜色和下划线颜色。请帮忙。

android android-design-library android-textinputlayout
7个回答
224
投票

To change bottom line color, you can use this in your app theme:

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

有关详细信息,请查看THIS THREAD

To change floating label color

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

并使用它像:

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

更新: 如果您想要更改提示颜色,当它不是浮动标签时,请使用如下所示:

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

感谢@AlbAtNf


28
投票

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

聚焦:

Focused

没有焦点:

Without focus

错误信息:

enter image description here


13
投票

这个Blog Post描述了由EditText包裹的AutoCompleteTextViewTextInputLayout的各种造型方面。

对于EditText和AppCompat 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));
        }
    }
});

9
投票

在Edittext标签中添加此属性并享受:

 android:backgroundTint="@color/colorWhite"

6
投票

如果要更改TextInputLayout的条形图/线条颜色和提示文本颜色(通常是强调颜色),则只需创建此样式:

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

然后将其应用于您的TextInputLayout作为主题:

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

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


4
投票
<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项目样式。


2
投票
<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

© www.soinside.com 2019 - 2024. All rights reserved.