Comment changer la couleur d'étiquette flottante de TextInputLayout

En référence à la nouvelle TextInputLayoutversion de Google, comment modifier la couleur du texte de l'étiquette flottante?

Réglage colorControlNormal, colorControlActivated, colorControlHighLightdans des styles ne l' aide.

Voici ce que j'ai maintenant:

Essayez le code ci-dessous, il fonctionne dans un état 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>

Dans le dossier des styles Code TextLabel

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

Définir sur le thème principal de l'application, cela ne fonctionne que surligner l'état uniquement

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

Mettre à jour:

UnsupportedOperationException: impossible de convertir en couleur: type = 0x2 dans l'api 16 ou en dessous

Solution

Mettre à jour:

Utilisez-vous la bibliothèque de composants de matériaux

Vous pouvez ajouter des lignes ci-dessous à votre thème principal

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

ou bien voulez-vous différentes couleurs à l'état noraml et à l'état activé et avec la personnalisation, suivez le code ci-dessous

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

Ajoutez la ligne ci-dessous à votre thème principal, sinon vous pouvez définir le style sur textinputlayout dans votre 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>

Trouvé la réponse, utilisez l' android.support.design:hintTextAppearanceattribut pour définir votre propre apparence d'étiquette flottante.

Exemple:

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

Vous n'avez pas besoin d'utiliser android:theme="@style/TextInputLayoutTheme"pour modifier la couleur de l'étiquette flottante, car cela affectera l'ensemble du thème du petit TextView utilisé comme étiquette. Au lieu de cela, vous pouvez utiliser app:hintTextAppearance="@style/TextInputLayout.HintText"où:

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

Faites-moi savoir si la solution fonctionne :-)

comment changer la couleur du texte de l'étiquette flottante?

Avec la bibliothèque de composants de matériaux, vous pouvez personnaliser la TextInputLayoutcouleur du texte de l'indice à l'aide (elle nécessite la version 1.1.0)

• Dans la mise en page:

• app:hintTextColor attribut: la couleur de l'étiquette lorsqu'elle est réduite et que le champ de texte est actif

• android:textColorHint attribut: la couleur de l'étiquette dans tous les autres états de champ de texte (tels que repos et désactivé)

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

• étendre un style de matériau 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>

Le sélecteur par défaut pour android:textColorHintest:

<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, donc, j'ai trouvé cette réponse très utile et merci à toutes les personnes qui ont contribué. Mais juste pour ajouter quelque chose. La réponse acceptée est en effet la bonne réponse ... MAIS ... dans mon cas, je cherchais à implémenter le message d'erreur sous le EditTextwidget avec app:errorEnabled="true"et cette seule ligne m'a rendu la vie difficile. il semble que cela remplace le thème que j'ai choisi android.support.design.widget.TextInputLayout, qui a une couleur de texte différente définie par android:textColorPrimary.

À la fin, j'ai commencé à appliquer une couleur de texte directement au EditTextwidget. Mon code ressemble à ceci:

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>

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

Maintenant, il affiche la couleur du texte noir au lieu du textColorPrimaryblanc.

Je vous suggère de créer un thème de style pour TextInputLayout et de ne changer que la couleur d'accent. Définissez le parent sur le thème de base de votre application:

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

Dans la dernière version de la bibliothèque de support (23.0.0+), TextInputLayoutprend l'attribut suivant en XML pour modifier la couleur d'étiquette flottante:android:textColorHint="@color/white"

Au lieu de Brahmam Yamani, je préfère utiliser Widget.Design.TextInputLayout comme parent. Cela garantit que tous les éléments requis sont présents, même si tous les éléments ne sont pas remplacés. Dans la réponse Yamanis, l'application plantera avec une ressource non résoluble, si setErrorEnabled (true) est appelé.

Changez simplement le style comme suit:

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

Dans mon cas, j'ai ajouté ceci " app:hintTextAppearance="@color/colorPrimaryDark"dans mon widget TextInputLayout.

Par programme, vous pouvez utiliser:

/* 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})

Explication:

Obtenez la valeur de couleur int d'une ressource de couleur (un moyen de présenter les couleurs RVB utilisées par Android). J'ai écrit ColorEnabled, mais il devrait vraiment être, pour cette réponse, ColorHintExpanded & ColorViewCollapsed. Quoi qu'il en soit, c'est la couleur que vous verrez lorsque le conseil d'une vue "TextInputLayout" est sur l'état Expanded ou Collapsed; vous le définirez en utilisant le tableau suivant sur la fonction "setDefaultHintTextColor" de la vue. Référence: Référence pour TextInputLayout - recherchez dans cette page la méthode "setDefaultHintTextColor" pour plus d'informations

En regardant les documents ci-dessus, vous pouvez voir que les fonctions définissent les couleurs de l'indice développé et réduit en utilisant un ColorStateList.

Documents ColorStateList

Pour créer ColorStateList, j'ai d'abord créé une matrice avec les états que je veux, dans mon cas state_enabled & state_disabled (dont sont, dans TextInputLayout, égal à Hint Expanded et Hint Collapsed [Je ne me souviens pas dans quel ordre lol, de toute façon je l'ai trouvé) je fais juste un test]). Ensuite, je passe au constructeur de ColorStateList les tableaux avec des valeurs int de ressources de couleur, ces couleurs ont une correspondance avec la matrice d'états (chaque élément du tableau de couleurs correspond au tableau respectif dans la matrice d'états à la même position). Ainsi, le premier élément du tableau de couleurs sera utilisé comme couleur pour chaque état du premier tableau de la matrice d'états (dans notre cas, le tableau n'a qu'un seul élément: état activé = état élargi pour TextInputLayut). Les dernières choses que les états ont des valeurs positives / négatives, et vous n'avez que les valeurs positives,

J'espère que cela vous sera utile. Au revoir, bon codage (:

Pour changer la couleur de l'indice et modifier la couleur de soulignement du texte: colorControlActivated

Pour changer la couleur du compteur de caractères: textColorSecondary

Pour modifier la couleur du message d'erreur: colorControlNormal

Pour modifier la teinte du bouton de visibilité du mot de passe: colorForeground

Pour plus d'informations sur TextInputLayout, consultez 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>

vous devez changer votre couleur ici

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

Maintenant, utilisez simplement colorAccentet colorPrimaryfonctionnera parfaitement.

Je résous le problème. C'est la mise en page:

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

C'est le 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>

Vous devez utiliser votre thème dans l'application:

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

pour changer la couleur de l'étiquette de texte lorsque vous vous concentrez dessus. c'est-à-dire en le tapant. vous devez ajouter spécifier

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

Juste une note: vous devez ajouter toutes ces implémentations à votre thème principal.

Son travail pour moi ..... ajouter une couleur de conseil dans 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>

J'ai essayé d'utiliser android: textColorHint dans android.support.design.widget.TextInputLayout, cela fonctionne 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>    

ajoutez ceci aux styles et définissez TextInputLayout Theam sur App2 et cela fonctionnera;)

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

Peut utiliser app:hintTextColorsi vous utilisez com.google.android.material.textfield.TextInputLayout, essayez ceci

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

Essayez le code ci-dessous, il fonctionne dans un état 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>

Dans le dossier des styles Code TextLabel

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

L'astuce doit être définie sur TextInputLayout, plutôt que sur EditText. Si un conseil est spécifié sur le EditText enfant en XML, TextInputLayout peut toujours fonctionner correctement; TextInputLayout utilisera l'indicateur EditText comme étiquette flottante. Cependant, les appels futurs pour modifier le conseil ne mettront pas à jour le conseil de TextInputLayout. Pour éviter tout comportement inattendu, appelez setHint (CharSequence) et getHint () sur TextInputLayout, plutôt que sur EditText.

Je me suis donc android:hintet app:hintTextColorsur TextInputLayout, pas TextInputEditTextet cela a fonctionné.

Parce que vous devez ajouter colorControlNormal, colorControlActivated, les colorControlHighLightarticles au thème principal de l' application:

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