How to change the floating label color of TextInpu

问题:

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

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

This is what I have now:

回答1:

Try The Below Code It Works In Normal State

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

In Styles Folder TextLabel Code

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

Set To Main Theme of App,It Works Only Highlight State Only

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

Update:

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

Solution

回答2:

<style name=\"TextAppearance.App.TextInputLayout\" parent=\"@android:style/TextAppearance\">
    <item name=\"android:textColor\">@color/red</item>
    <item name=\"android:textSize\">14sp</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width=\"match_parent\"
    android:layout_height=\"wrap_content\"
    android:textColorHint=\"@color/gray\"  //support 23.0.0
    app:hintTextAppearance=\"@style/TextAppearence.App.TextInputLayout\" >

    <android.support.v7.widget.AppCompatEditText
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\"
        android:hint=\"@string/hint\" />
</android.support.design.widget.TextInputLayout>

回答3:

Found the answer, use android.support.design:hintTextAppearance attribute to set your own floating label appearance.

Example:

<android.support.design.widget.TextInputLayout
    android:layout_width=\"match_parent\"
    android:layout_height=\"wrap_content\"
    xmlns:app=\"http://schemas.android.com/apk/res-auto\"
    app:hintTextAppearance=\"@style/TextAppearance.AppCompat\">

    <EditText
        android:id=\"@+id/password\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\"
        android:hint=\"@string/prompt_password\"/>
</android.support.design.widget.TextInputLayout>

回答4:

You don\'t need to use android:theme=\"@style/TextInputLayoutTheme\" to change the floating label color, since it\'s going to affect to the entire theme for the small TextView used as label. Instead, you could use app:hintTextAppearance=\"@style/TextInputLayout.HintText\" where:

<style name=\"TextInputLayout.HintText\">
  <item name=\"android:textColor\">?attr/colorPrimary</item>
  <item name=\"android:textSize\">@dimen/text_tiny_size</item>
  ...
</style>

Let me know if the solution works :-)

回答5:

Ok, so, I found this answer very helpful and thanks to all the people who contributed. Just to add something, though. The accepted answer is indeed the correct answer...BUT...in my case, I was looking to implement the error message below the EditText widget with app:errorEnabled=\"true\" and this single line made my life difficult. it seems that this overrides the theme I chose for android.support.design.widget.TextInputLayout, which has a different text color defined by android:textColorPrimary.

In the end I took to applying a text color directly to the EditText widget. My code looks something like this:

styles.xml

<item name=\"colorPrimary\">@color/my_yellow</item>
<item name=\"colorPrimaryDark\">@color/my_yellow_dark</item>
<item name=\"colorAccent\">@color/my_yellow_dark</item>
<item name=\"android:textColorPrimary\">@android:color/white</item>
<item name=\"android:textColorSecondary\">@color/dark_gray</item>
<item name=\"android:windowBackground\">@color/light_gray</item>
<item name=\"windowNoTitle\">true</item>
<item name=\"windowActionBar\">false</item>
<item name=\"android:textColorHint\">@color/dark_gray</item>
<item name=\"android:colorControlNormal\">@android:color/black</item>
<item name=\"android:colorControlActivated\">@android:color/white</item>

And my widget:

<android.support.design.widget.TextInputLayout
        android:id=\"@+id/log_in_layout_name\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\"
        app:errorEnabled=\"true\">

        <EditText
            android:id=\"@+id/log_in_name\"
            android:layout_width=\"match_parent\"
            android:layout_height=\"wrap_content\"
            android:layout_gravity=\"center_horizontal\"
            android:textColor=\"@android:color/black\"
            android:ems=\"10\"
            android:hint=\"@string/log_in_name\"
            android:inputType=\"textPersonName\" />
</android.support.design.widget.TextInputLayout>

Now it displays black text color instead of the textColorPrimary white.

回答6:

I suggest you make style theme for TextInputLayout and change only accent color. Set parent to your app base theme:

 <style name=\"MyTextInputLayout\" parent=\"MyAppThemeBase\">
     <item name=\"colorAccent\">@color/colorPrimary</item>
 </style>

 <android.support.design.widget.TextInputLayout
  android:layout_width=\"fill_parent\"
  android:layout_height=\"wrap_content\"
  android:theme=\"@style/MyTextInputLayout\">

回答7:

In the latest version of the support library (23.0.0+), TextInputLayout takes the following attribute in XML to edit the floating label color: android:textColorHint=\"@color/white\"

回答8:

Instead of Brahmam Yamani answer I prefer to use Widget.Design.TextInputLayout as parent. That ensures, that all required items are present, even if not all items are overwritten. In Yamanis answer, the app will crash with an unresolvable resource, if setErrorEnabled(true) is called.

Simply change the style to the following:

<style name=\"TextLabel\" parent=\"Widget.Design.TextInputLayout\">
    <!-- 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>

回答9:

you should change your colour here

<style name=\"Base.Theme.DesignDemo\" parent=\"Theme.AppCompat.Light.NoActionBar\">
        <item name=\"colorPrimary\">#673AB7</item>
        <item name=\"colorPrimaryDark\">#512DA8</item>
        <item name=\"colorAccent\">#FF4081</item>
        <item name=\"android:windowBackground\">@color/window_background</item>
    </style>

回答10:

Now, simply using colorAccent and colorPrimary will work perfectly.

回答11:

I solve the problem. This is Layout：

 <android.support.design.widget.TextInputLayout
           android:id=\"@+id/til_username\"
           android:layout_width=\"match_parent\"
           android:layout_height=\"wrap_content\"
           android:hint=\"@string/username\"
           >

           <android.support.v7.widget.AppCompatEditText android:id=\"@+id/et_username\"
               android:layout_width=\"match_parent\"
               android:layout_height=\"wrap_content\"
               android:singleLine=\"true\"
               />
       </android.support.design.widget.TextInputLayout>

This is Style:

<style name=\"AppBaseTheme\" parent=\"Theme.AppCompat.Light.DarkActionBar\">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
<!-- Application theme. -->


 <style name=\"AppTheme\" parent=\"AppBaseTheme\">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name=\"colorAccent\">@color/pink</item>
        <item name=\"colorControlNormal\">@color/purple</item>
        <item name=\"colorControlActivated\">@color/yellow</item>
    </style>

You should use your theme in application:

<application
        android:allowBackup=\"true\"
        android:icon=\"@drawable/ic_launcher\"
        android:label=\"@string/app_name\"
        android:theme=\"@style/AppTheme\" >
</application>

回答12:

to change color of the text label when you are focusing on it. i.e. typing in it. you have to add specify

<item name=\"android:textColorPrimary\">@color/yourcolorhere</item>

Just a note: You have to add all these implementations to your main theme.

回答13:

Its Working for me ..... add hint color in TextInputLayout

    <android.support.design.widget.TextInputLayout
        android:textColorHint=\"#ffffff\"
        android:id=\"@+id/input_layout_password\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\">
        <EditText
            android:id=\"@+id/edtTextPassword\"
            android:layout_width=\"match_parent\"
            android:layout_height=\"wrap_content\"
            android:layout_marginTop=\"15dp\"
            android:hint=\"Password\"
            android:inputType=\"textPassword\"
            android:singleLine=\"true\"
            />
    </android.support.design.widget.TextInputLayout>

回答14:

To change color of hint and edit text underline color : colorControlActivated

To change character counter color : textColorSecondary

To change error message color : colorControlNormal

To change password visibility button tint : colorForeground

For more info on TextInputLayout read http://www.zoftino.com/android-textinputlayout-tutorial

<style name=\"MyAppTheme\" parent=\"Theme.AppCompat.Light.DarkActionBar\">
    <item name=\"colorPrimary\">@color/colorPrimary</item>
    <item name=\"colorPrimaryDark\">@color/colorPrimaryDark</item>
    <item name=\"colorControlActivated\">#e91e63</item>
    <item name=\"android:colorForeground\">#33691e</item>
    <item name=\"colorControlNormal\">#f57f17</item>
    <item name=\"android:textColorSecondary\">#673ab7</item>
</style>

回答15:

I tried using android:textColorHint in the android.support.design.widget.TextInputLayout it works fine.

        <android.support.design.widget.TextInputLayout
            android:layout_width=\"match_parent\"
            android:layout_height=\"wrap_content\"
            android:textColorHint=\"@color/colorAccent\">

            <EditText
                android:layout_width=\"match_parent\"
                android:layout_height=\"wrap_content\"
                android:hint=\"Hello\"
                android:imeActionLabel=\"Hello\"
                android:imeOptions=\"actionUnspecified\"
                android:maxLines=\"1\"
                android:singleLine=\"true\"/>

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

回答16:

  <style name=\"AppTheme2\" parent=\"AppTheme\">
    <!-- Customize your theme here. -->
    <item name=\"colorControlNormal\">#fff</item>
    <item name=\"colorControlActivated\">#fff</item></style>    

add this to styles and set TextInputLayout Theam to App2 and it will work ;)

回答17:

In my case I added this \"app:hintTextAppearance=\"@color/colorPrimaryDark\"in my TextInputLayout widget.