如何更改TextInputLayout的浮动标签颜色 [英] How to change the floating label color of TextInputLayout

问题描述

参考谷歌新发布的TextInputLayout，如何更改浮动标签文字颜色?

With reference to the new TextInputLayout released by Google, how do I change the floating label text color?

在样式中设置 colorControlNormal、colorControlActivated、colorControlHighLight 没有帮助.

Setting colorControlNormal, colorControlActivated, colorControlHighLight in styles does not help.

这就是我现在所拥有的:

This is what I have now:

推荐答案

试试下面的代码，它在正常状态下工作

 <android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/TextLabel">

     <android.support.v7.widget.AppCompatEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="Hiiiii"
         android:id="@+id/edit_id"/>

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

在样式文件夹中文本标签代码

 <style name="TextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

设置为应用主主题，仅高亮状态有效

 <item name="colorAccent">@color/Color Name</item>

更新:

UnsupportedOperationException:无法转换为颜色:在 api 16 或以下版本中 type=0x2

UnsupportedOperationException: Can't convert to color: type=0x2 in api 16 or below

解决方案

更新:

您是否在使用材料组件库

您可以在主题中添加以下几行

You can add below lines to your main theme

 <item name="colorPrimary">@color/your_color</item> // Activated State
 <item name="colorOnSurface">@color/your_color</item> // Normal State

否则您是否想要在 noraml 状态和激活状态下使用不同的颜色并进行自定义，请遵循以下代码

or else do you want different colors in noraml state and activated state and with customization follow below code

<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item> //Changes the Shape Apperance
    <!--<item name="hintTextColor">?attr/colorOnSurface</item>-->   //When you added this line it will applies only one color in normal and activate state i.e colorOnSurface color
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorPrimary">@color/colorPrimaryDark</item>  //Activated color
    <item name="colorOnSurface">@color/colorPrimary</item>    //Normal color
    <item name="colorError">@color/colorPrimary</item>        //Error color

    //Text Appearance styles
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
    <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>

    <!--Note: When setting a materialThemeOverlay on a custom TextInputLayout style, don’t forget to set editTextStyle to either a @style/Widget.MaterialComponents.TextInputEditText.* style or to a custom one that inherits from that.
    The TextInputLayout styles set materialThemeOverlay that overrides editTextStyle with the specific TextInputEditText style needed. Therefore, you don’t need to specify a style tag on the edit text.-->
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>

<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>

将下面这行添加到您的主题中，否则您可以在 xml 中将样式设置为 textinputlayout

Add the below line to your main theme or else you can set style to textinputlayout in your xml

<item name="textInputStyle">@style/Widget.App.TextInputLayout</item>

这篇关于如何更改TextInputLayout的浮动标签颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！