web-dev-qa-db-fra.com

Comment changer la couleur de l'étiquette flottante de TextInputLayout

En ce qui concerne la nouvelle TextInputLayout publiée par Google, comment puis-je modifier la couleur du texte de l'étiquette flottante?

Définir colorControlNormal, colorControlActivated, colorControlHighLight dans les styles n'aide pas.

Voici ce que j'ai maintenant:

This is what I have now

androidandroid-edittextandroid-design-library
181
johanson

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

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>

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

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

Mettre à jour: 

UnsupportedOperationException: Impossible de convertir en couleur: type = 0x2 dans api 16 ou inférieur 

Solution

328
Brahmam Yamani
<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>
92
Fang

Si vous avez trouvé la réponse, utilisez l'attribut Android.support.design:hintTextAppearance 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>
68
johanson

Il n'est pas nécessaire d'utiliser Android:theme="@style/TextInputLayoutTheme" pour modifier la couleur de l'étiquette flottante, car cela affectera le thème entier du petit TextView utilisé comme étiquette. À la place, 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 :-)

19
cesards

D'accord, j'ai trouvé cette réponse très utile et merci à toutes les personnes qui ont contribué. Juste pour ajouter quelque chose, cependant. La réponse acceptée est en effet la bonne réponse ... MAIS ... dans mon cas, je cherchais à mettre en œuvre le message d'erreur sous le widget EditText 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 pour 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 widget EditText. 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 blanc textColorPrimary.

4
ZooS

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

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

2
spierce7

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 écrasés. Dans Yamanis répondre, l'application va planter avec une ressource insoluble, si setErrorEnabled (true) est appelée.

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

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

1
KoralReef

Pour changer la couleur du conseil et modifier la couleur de soulignement du texte: colorControlActivated

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

Pour changer la couleur du message d'erreur: colorControlNormal 

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

Pour plus d'informations sur TextInputLayout, lisez 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>
0
Arnav Rao

J'ai essayé d'utiliser Android: textColorHint dans le fichier Android.support.design.widget.TextInputLayout.

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

Maintenant, utiliser simplement colorAccent et colorPrimary fonctionnera parfaitement.

0
Kyle Horkley

tu devrais changer de 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>
0
luttu android
  <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 Theme sur App2 et cela fonctionnera;)

0
Ahmed mohamed hussien

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

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

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

0
Yash Ojha

Son travail pour moi ..... Ajouter un indice de couleur 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>
0
kamal verma

Je résous le problème . Ceci est la disposition:

 <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 devriez 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>
0
Daniel Chen
<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>
0
Ketan Ramani