Cómo cambiar el color de la etiqueta flotante de TextInputLayout

Con referencia al nuevo TextInputLayoutlanzamiento de Google, ¿cómo cambio el color del texto de la etiqueta flotante?

Configuración colorControlNormal, colorControlActivated, colorControlHighLighten los estilos no ayuda.

Esto es lo que tengo ahora:

Pruebe el siguiente código: funciona en estado normal

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

En la carpeta de estilos 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>

Establecer como tema principal de la aplicación, solo funciona Solo resaltar estado

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

Actualizar:

UnsupportedOperationException: no se puede convertir a color: tipo = 0x2 en la API 16 o inferior

Solución

Actualizar:

¿Está utilizando la Biblioteca de componentes de material?

Puedes agregar líneas debajo de tu tema principal

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

o si quieres diferentes colores en estado noraml y estado activado y con personalización sigue el siguiente código

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

Agregue la siguiente línea a su tema principal o puede configurar el estilo para textinputlayout en su xml

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

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

Encontró la respuesta, use el android.support.design:hintTextAppearanceatributo para establecer su propia apariencia de etiqueta flotante.

Ejemplo:

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

No necesita usar android:theme="@style/TextInputLayoutTheme"para cambiar el color de la etiqueta flotante, ya que va a afectar a todo el tema para el pequeño TextView utilizado como etiqueta. En cambio, podría usar app:hintTextAppearance="@style/TextInputLayout.HintText"donde:

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

Avíseme si la solución funciona :-)

¿Cómo cambio el color del texto de la etiqueta flotante?

Con la biblioteca de Componentes de material puede personalizar el TextInputLayoutcolor del texto de la sugerencia utilizando (requiere la versión 1.1.0)

• En el diseño:

• app:hintTextColor atributo: el color de la etiqueta cuando se contrae y el campo de texto está activo

• android:textColorHint atributo: el color de la etiqueta en todos los demás estados de campo de texto (como en reposo y deshabilitado)

<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>

• extendiendo un estilo material Widget.MaterialComponents.TextInputLayout.* :

<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextColor">@color/mycolor</item>
    <item name="android:textColorHint">@color/text_input_hint_selector</item>
</style>

El selector predeterminado para android:textColorHintes:

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

Ok, entonces, encontré esta respuesta muy útil y gracias a todas las personas que contribuyeron. Sin embargo, solo para agregar algo. La respuesta aceptada es de hecho la respuesta correcta ... PERO ... en mi caso, estaba buscando implementar el mensaje de error debajo del EditTextwidget con app:errorEnabled="true"y esta sola línea me hizo la vida difícil. parece que esto anula el tema que elegí android.support.design.widget.TextInputLayout, que tiene un color de texto diferente definido por android:textColorPrimary.

Al final, decidí aplicar un color de texto directamente al EditTextwidget. Mi código se parece a esto:

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>

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

Ahora muestra el color del texto negro en lugar del textColorPrimaryblanco.

Le sugiero que cree un tema de estilo para TextInputLayout y cambie solo el color de acento. Establezca el padre en el tema base de su aplicación:

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

En la última versión de la biblioteca de soporte (23.0.0+), TextInputLayouttoma el siguiente atributo en XML para editar el color de la etiqueta flotante:android:textColorHint="@color/white"

En lugar de la respuesta de Brahmam Yamani, prefiero usar Widget.Design.TextInputLayout como padre. Eso garantiza que todos los elementos necesarios estén presentes, incluso si no todos los elementos se sobrescriben. En la respuesta de Yamanis, la aplicación se bloqueará con un recurso irresoluble, si se llama a setErrorEnabled (true).

Simplemente cambie el estilo a lo siguiente:

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

En mi caso, agregué esto " app:hintTextAppearance="@color/colorPrimaryDark"en mi widget TextInputLayout.

Programáticamente puedes usar:

/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);

/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};

/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})

Explicacion:

Obtenga el valor de color int de un recurso de color (una forma de presentar los colores rgb utilizados por android). Escribí ColorEnabled, pero realmente debería ser, para esta respuesta, ColorHintExpanded y ColorViewCollapsed. De todos modos, este es el color que verá cuando la sugerencia de una vista "TextInputLayout" esté en estado Expandido o Contraído; lo configurará utilizando la siguiente matriz en la función "setDefaultHintTextColor" de la vista. Referencia: Referencia para TextInputLayout: busque en esta página el método "setDefaultHintTextColor" para obtener más información

Mirando los documentos anteriores, puede ver que las funciones establecen los colores para la sugerencia expandida y contraída mediante una ColorStateList.

ColorStateList docs

Para crear ColorStateList, primero creé una matriz con los estados que quiero, en mi caso state_enabled & state_disabled (que son, en TextInputLayout, es igual a Hint Expanded y Hint Collapsed [No recuerdo en qué orden lol, de todos modos lo encontré simplemente haciendo una prueba]). Luego paso al constructor de ColorStateList las matrices con valores int de recursos de color, estos colores tienen correspondencias con la matriz de estados (cada elemento en la matriz de colores corresponde a la matriz respectiva en la matriz de estados en la misma posición). Por lo tanto, el primer elemento de la matriz de colores se usará como color para cada estado en la primera matriz de la matriz de estados (en nuestro caso, la matriz tiene solo 1 elemento: estado habilitado = estado expandido de pista para TextInputLayut). Los últimos estados tienen valores positivos / negativos, y solo tiene los valores positivos,

Espero que esto sea útil. Adiós, ten una buena codificación (:

Para cambiar el color de la pista y editar el color de subrayado del texto: colorControlActivated

Para cambiar el color del contador de caracteres: textColorSecondary

Para cambiar el color del mensaje de error: colorControlNormal

Para cambiar el tono del botón de visibilidad de contraseña: colorForeground

Para obtener más información sobre TextInputLayout, lea 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>

deberías cambiar tu color aquí

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

Ahora, simplemente usando colorAccenty colorPrimaryfuncionará perfectamente.

Yo resuelvo el problema. Este es el diseño ：

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

Este es el estilo:

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

Debe usar su tema en la aplicación:

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

para cambiar el color de la etiqueta de texto cuando se está enfocando en ella. es decir, escribir en él. tienes que agregar especificar

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

Solo una nota: debe agregar todas estas implementaciones a su tema principal.

Está funcionando para mí ... agregue color de pista en 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>

Intenté usar android: textColorHint en android.support.design.widget.TextInputLayout funciona bien.

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

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

agregue esto a los estilos y configure TextInputLayout Theam en App2 y funcionará;)

<com.google.android.material.textfield.TextInputLayout
    android:hint="Hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:maxLines="1"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        android:textColor="#000000"
        android:textColorHint="#959aa6" />

</com.google.android.material.textfield.TextInputLayout>

res / values ​​/ styles.xml

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">#545454</item>
    <item name="colorControlActivated">#2dbc99</item>
    <item name="android:textSize">11sp</item>
</style>

Se puede usar app:hintTextColorsi lo usas com.google.android.material.textfield.TextInputLayout, prueba esto

 <com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/app_name" 
     app:hintTextColor="@android:color/white">                   

     <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
 </com.google.android.material.textfield.TextInputLayout>

Pruebe el siguiente código: funciona en estado normal

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

En la carpeta de estilos 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>

De la documentación:

La sugerencia debe establecerse en TextInputLayout, en lugar de EditText. Si se especifica una pista en el EditText secundario en XML, TextInputLayout podría funcionar correctamente; TextInputLayout utilizará la sugerencia de EditText como etiqueta flotante. Sin embargo, las futuras llamadas para modificar la sugerencia no actualizarán la sugerencia de TextInputLayout. Para evitar comportamientos no deseados, llame a setHint (CharSequence) y getHint () en TextInputLayout, en lugar de en EditText.

Así que encendí android:hinty app:hintTextColorencendí TextInputLayout, no encendí TextInputEditTexty funcionó.

Debido a que se debe añadir colorControlNormal, colorControlActivated, colorControlHighLightartículos para el tema principal de la aplicación:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlActivated">@color/yellow_bright</item>
        <item name="colorControlNormal">@color/yellow_black</item>

    </style>