Changer la couleur du conseil EditText lors de l'utilisation de TextInputLayout

146

J'utilise le nouveau TextInputLayoutde la bibliothèque de design. Je suis capable de le montrer et de changer la couleur de l'étiquette flottante. Malheureusement, l' EditTextindice réel est maintenant toujours blanc.

J'ai essayé de changer le hintColor dans XML, les styles et le programme et j'ai également essayé d'utiliser le android.support.v7.widget.AppCompatEditText mais le EditTextconseil montre toujours le blanc.

Voici mon XML pour mon TextInputLayoutetEditText

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


    <EditText

    android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/city"
        android:textColorHint="@color/black"
        android:hint="@string/city" />

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

Et voici le style que j'utilise pour le TextInputLayout(j'ai essayé de rendre l' hintTextColorattribut noir mais je n'ai rien fait pour moi):

<style name="GreenTextInputLayout" parent="@style/TextAppearance.AppCompat">
    <item name="android:textColor">@color/homestory_green</item>
</style>
SamIAmHarris
la source
Je suis confronté à la même erreur. L'indication est toujours de couleur "BLANCHE" au départ après avoir touché n'importe quel editText, elle prend la couleur définie par vous. Toujours à la recherche du correctif.
ch3tanz
Avez-vous essayé la réponse de @Ali Kabiri. Il semble que ce soit une meilleure solution que la mienne. Le mien était très spécifique à mon projet.
SamIAmHarris
J'ai mon thème personnalisé et toutes les couleurs sont définies dans le style.xml
ch3tanz

Réponses:

164

Définissez android:textColorHintdans votre thème d'application:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>

    <item name="android:textColorHint">@color/secondary_text</item>
</style>

La source

Mbelsky
la source
@TheHungryAndroider avez-vous défini le thème comme thème de l'activité où vous utilisez le texte d'édition?
mbelsky
1
Cela fonctionne pour moi mais la couleur de l'indice n'est pas définie lors de la création du fragment et de la vue, je dois cliquer sur mon EditTextpour que la couleur de l'indice soit définie sur toutes les entrées de la vue ... je n'ai pas encore trouvé de solution à cela ( requestFocus()et performClick()ne faites pas l'affaire malheureusement).
flawyte
1
fonctionnait lorsqu'il était utilisé comme attribut: <EditText android: inputType = "textMultiLine" android: lines = "4" android: gravity = "top | right" android: layout_width = "fill_parent" android: layout_height = "match_parent" android: hint = " hint text "android: textColorHint =" # 919389 "/>
masoud Cheragee
75

Créez un style personnalisé dans style.xml

<style name="EditTextHint" parent="TextAppearance.AppCompat">
    <item name="colorAccent">@android:color/white</item>
    <item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
    <item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
    <item name="colorControlActivated">@color/your color</item>
    <item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>
</style>

Ensuite, dans votre fichier xml de mise en page, ajoutez l' attribut de thème comme ci-dessous

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

      <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

j'espère que cela fonctionne

Deekshith R Moolya
la source
4
Affichage de "Erreur de gonflage de la classe EditText". Veuillez aider!
Mohit Khaitan le
@Coder certains des attributs qu'il a ajoutés sont pour 21+
Mr.O
49

Ajouter la propriété textColorHint à votre texte d'édition

android:textColorHint="#F6F6F6"

ou de la couleur de votre choix

Administrateur Cherry
la source
41

eu le même problème. Résolu en mettant ces lignes dans le thème parent .

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimaryDark</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/AccentColor</item>
    <item name="android:windowTranslucentStatus">true</item>

    <item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
    <item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
    <item name="colorControlActivated">#ff0000</item>
    <item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>
    <!-- Customize your theme here. -->
</style>

Si vous mettez ces

<item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
<item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
<item name="colorControlActivated">#ff0000</item>
<item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>

dans un style distinct et appliquez-le à TextInputLayout ou Edittext, il n'apparaîtra pas. Vous DEVEZ le placer dans le thème parent de l'application.

SajithK
la source
3
C'est vraiment frustrant de ne pas pouvoir avoir plusieurs styles d'entrée dans l'application en utilisant ce widget, mais pour autant que je sache, vous avez raison. : /
Turnsole
4
Eh bien, il n'est pas nécessaire de l'avoir dans l'ensemble de l'application. Vous ne pouvez appliquer ce thème qu'à une seule activité de votre fichier manifeste. Et créez un autre thème pour le reste de vos activités.
RexSplode
23

Je ne suis pas sûr de la cause de votre problème, ce code fonctionne parfaitement pour moi. Je pense que cela a quelque chose à voir avec l'utilisation du bon espace de noms xml ( xmlns). Je ne sais pas si l'utilisation de android.support.design sans l'attribut d'espace de noms xml est prise en charge. Ou cela a quelque chose à voir avec l' textColorHintattribut que vous utilisez sur le EditText lui-même.

Disposition:

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

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="test"
        android:inputType="text" />
</android.support.design.widget.TextInputLayout>

Style:

<style name="GreenTextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>
Rolf ツ
la source
2
Cela fonctionne toujours comme ce que j'ai. Le problème que je rencontre est qu'avant que l'utilisateur ne touche le EditText, la couleur EditText est blanche. Lorsque l'utilisateur touche le EditText, l'étiquette TextInputLayout est verte et fonctionne correctement.
SamIAmHarris
même problème ici @ user3520299, une chance pour trouver une solution?
AhmedW
Le mien était un cas unique car la vue parente avait un ensemble de thèmes qui causait le problème. Mais le code que j'ai mis en place fonctionne bien maintenant après avoir supprimé ce thème
SamIAmHarris
1
Cela fonctionne pour l'indicateur flottant, mais pas l'indicateur à l'intérieur du contrôle EditText vide. Pour cela, mettez à jour le thème de l'application selon la réponse de @ mbelsky
Richard Le Mesurier
À propos, le style par défaut de l'application: hintTextAppearance est @style/TextAppearance.Design.Hint, vous voudrez peut-être l'utiliser comme votre parentplutôt que @android:style/TextAppearanceou@style/TextAppearance.AppCompat
rockgecko
19

Reportez-vous au code ci-dessous, cela a fonctionné pour moi, mais cela affectera la couleur de toutes vos commandes.

 <!-- In your style.xml file -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
            <!--EditText hint color-->
            <item name="android:textColorHint">@color/default_app_white</item>
           <!-- TextInputLayout text color-->
            <item name="colorControlActivated">@color/default_app_green</item>
            <!-- EditText line color when EditText on-focus-->
            <item name="colorControlHighlight">@color/default_app_green</item>
            <!-- EditText line color when EditText  in un-focus-->
            <item name="colorControlNormal">@color/default_app_white</item>
        </style>
Rajiv Manivannan
la source
Cela devrait être accepté - cela montre quelles propriétés sont utilisées pour chacun des éléments importants.
Richard Le Mesurier
15

Dans le TextInputLayout qui contient le EditText, ajoutez:

android:textColorHint="someColor"
Brent Ray
la source
14

Beaucoup de réponses mais il suffit d'une ligne pour cela:

android: textColorHint = "# 000000"

    <EditText
        android:id="@+id/edtEmail"
        android:textColorHint="#000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
Diego Venâncio
la source
10

android: textColorHint = "# FFFFFF" fonctionne parfois et parfois non. Pour moi, la solution ci-dessous fonctionne parfaitement

Essayez le code ci-dessous, cela fonctionne Dans votre fichier XML et le thème TextLabel est défini dans style.xml

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

     <EditText
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:hint="Floating Label"
         android:id="@+id/edtText"/>

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

Dans le dossier Styles Code TextLabel

 <style name="MyTextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
<!--The size of the text appear on label in false state -->
    <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>

Si vous souhaitez simplement changer la couleur de l'étiquette à l'état faux, colorAccent, colorControlNormal et colorControlActivated ne sont pas nécessaires

Jain sommé
la source
10

Vous pouvez utiliser à l' android:textColorHint="@color/color_black"intérieur TextInputlayoutCela a fonctionné pour moi.

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:textColorHint="@color/color_black"
                app:hintTextAppearance="@style/TextLabel">

                <EditText
                    android:id="@+id/et_state"
                    style="@style/profile_editTextStyle"

                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/billingState"
                    android:text="@string/billingState"
                     />
            </android.support.design.widget.TextInputLayout>
Sonia Rana
la source
8

Selon ceci: https://code.google.com/p/android/issues/detail?id=176559

Essaye ça:

<android.support.design.widget.TextInputLayout
    android:textColorHint="#A7B7C2"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <EditText
        android:id="@+id/et_confirm_password"
        android:textColor="@android:color/black"
        android:hint="Confirm password"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 </android.support.design.widget.TextInputLayout>

Cela fonctionne dans 23.1.1

Da DUAN
la source
6

Avec la bibliothèque de composants de matériau, vous pouvez personnaliser la TextInputLayoutcouleur du texte de l'indice en utilisant:

  • 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é)

Quelque chose comme:

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

entrez la description de l'image icientrez la description de l'image ici

Gabriele Mariotti
la source
5

On dirait que la vue parente avait un style pour une bibliothèque tierce qui provoquait le blanc EditText.

android:theme="@style/com_mixpanel_android_SurveyActivityTheme"

Une fois que j'ai supprimé cela, tout a bien fonctionné.

SamIAmHarris
la source
5

essayez ceci peut cela aider

      edittext.addTextChangedListener(new  TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "onTextChanged", 2000).show();;
            //newuser.setTextColor(Color.RED);
            edittext.setHintTextColor(Color.RED);

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "afterTextChanged", 2000).show();;

        }
    });
jeet parmar
la source
pourquoi l'avez-vous mis dans onTextChanged listener?
user25
5

tard mais ça peut aider quelqu'un que j'ai fait comme ça

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp"
        android:textColorHint="#8cffffff">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/email_edit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/security_email"
            android:inputType="textEmailAddress"
            android:textColor="@color/white"
            app:backgroundTint="#8cffffff" />
    </android.support.design.widget.TextInputLayout>
Mateen Chaudhry
la source
4
<item name="colorAccent">@android:color/black</item>

changez votre couleur Accent à votre couleur désirée dans votre thème, cela changera votre ligne EditText, le curseur ainsi que votre indice

ou vous pouvez également inclure ce style dans votre style.xml

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

puis dans votre TextInputLayout, vous pouvez le mettre comme ceci

<android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextLabel">
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/password"
                android:drawableStart="@drawable/password"
                android:maxLines="1"
                android:hint="password"
                android:inputType="textWebPassword" />

        </android.support.design.widget.TextInputLayout>
Sarmad Shah
la source
3
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"
                android:textColor="@color/black"
                android:textColorHint="@color/grey"/>
        </android.support.design.widget.TextInputLayout>

Utilisez textColorHint pour définir la couleur souhaitée comme couleur d'indication pour EditText. Le fait est que Hint dans le EditText disparaît non pas lorsque vous tapez quelque chose, mais immédiatement lorsque le EditText obtient le focus (avec une animation sympa). Vous le remarquerez clairement lorsque vous changez de focus et sur EditText.

Henri
la source
3

De la documentation:

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

Essayez de régler android:hintet app:hintTextColorà la TextInputLayoutplace de activé TextInputEditText.

Karl Jamoralin
la source
1

Vous devez définir la couleur de l'indice sur TextInputLayout.

Biro Csaba
la source
1
 <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_passdword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="#d3d3d3">
        <EditText
            android:id="@+id/etaddrfess_ciwty"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="50dp"
            android:fontFamily="@font/frutiger"
            android:gravity="start"
            android:hint="@string/address_city"
            android:padding="10dp"
            android:textColor="#000000"
            android:textColorHint="#000000"
            android:textSize="14sp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    </android.support.design.widget.TextInputLayout>``
Syed Danois Haider
la source
0

Essayez le code ci-dessous:

La couleur haute lumière est le blanc:

 <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_mobile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TextStyle"
        >

        <EditText
            android:id="@+id/input_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:drawablePadding="14dp"
            android:drawableLeft="8dp"
            android:textColor="@color/white"
            android:hint="Mobile" />
    </android.support.design.widget.TextInputLayout>

style: TextStyle

    <style name="TextStyle" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/white</item>
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/white</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/white</item>
     </style>
Chhornkimchheng
la source
0

Voici mon expérience avec ce problème similaire et la solution requise.

Exigence:

  • Besoin de créer une personnalisation TextInputEditText(on peut dire que certains devraient être transparents et d'autres non, mais utiliser des couleurs personnalisées pour divers événements)

Problème rencontré:

  • android:textColorHint ne fonctionne pas comme requis.

Solutions essayées, qui ont échoué:

  • Utilisé android:textColorHintavec style et appliqué à TextInputEditText. Aucun résultat ni différence.
  • Défini android:textColorHintdans le thème de l'application appliqué. Cela a aidé, mais il était maintenant défini pour toute l'application. (Pas à la hauteur des exigences)

Après beaucoup de RnD, la meilleure SOLUTION trouvée était dans un article qui décrivait que nous devions appliquer le thème à TextInputLayoutou à sa vue parente plutôt que d'appliquer uniquement le style à TextInputEditTextou à sa vue parente.

S'il vous plaît vérifier TextInputLayout Theming approprié qui a dit que comment nous sommes sur la mauvaise voie.

Harpreet
la source
0

Lorsque j'ai essayé de définir l'attribut de thème sur TextInputLayout, le thème était également appliqué à sa vue enfant edittext, ce que je ne voulais pas.

La solution qui a fonctionné pour moi a donc été d'ajouter un style personnalisé à la propriété "app: hintTextAppearance" de TextInputLayout.

Dans styles.xml, ajoutez le style suivant:

<style name="TextInputLayoutTextAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/text_color</item>
    <item name="android:textSize">@dimen/text_size_12</item>
</style>

Et appliquez ce style à la propriété "app: hintTextAppearance" de TextInputLayout comme ci-dessous:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/mobile_num_til"
        android:layout_width="0dp"
        android:layout_height="@dimen/dim_56"
        app:layout_constraintStart_toStartOf="@id/title_tv"
        app:layout_constraintEnd_toEndOf="@id/title_tv"
        app:layout_constraintTop_toBottomOf="@id/sub_title_tv"
        android:layout_marginTop="@dimen/dim_30"
        android:padding="@dimen/dim_8"
        app:hintTextAppearance="@style/TextInputLayoutTextAppearance"
        android:background="@drawable/rect_round_corner_grey_outline">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/mobile_num_et"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/mobile_number"
            android:gravity="center_vertical"
            android:background="@android:color/transparent"/>

    </com.google.android.material.textfield.TextInputLayout>
Sonu Sanjeev
la source
0

Si vous utilisez la nouvelle bibliothèque de conception de matériaux androidx, com.google.android.material vous pouvez utiliser colorstatelist pour contrôler la couleur du texte d'indication dans l'état focalisé, survolé et par défaut comme suit. (inspiré par ça )

Dans res/color/text_input_box_stroke.xmlquelque chose mis comme suit:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fcc" android:state_focused="true"/>
    <item android:color="#cfc" android:state_hovered="true"/>
    <item android:color="#ccf"/>
</selector>

Ensuite, dans votre styles.xmlvous mettriez:

<style name="MtTILStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
    <item name="hintTextColor">@color/text_input_box_stroke</item>
</style>

Enfin, indiquez votre style dans le réel TextInputLayout Pour une raison quelconque, vous devez également définir la android:textColorHintcouleur du texte par défaut de l'indice:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    android:textColorHint="#ccf"
    ...
Sasuke Uchiha
la source
0

si vous utilisez la bibliothèque de conception de matériaux. Actuellement, j'utilise la version

implémentation 'com.google.android.material: matériel: 1.3.0-alpha01'

1 - Définissez la couleur lorsque TextInputLayout est au repos.

<item name="android:textColorHint">@color/your_color_hint</item>

2 - Définissez la couleur lorsque TextInputLayout est flottant / focalisé / tapé.

<item name="hintTextColor">@color/your_color_floating_hint</item>

3 - Définissez la couleur de la ligne sous TextInputLayout.

<item name="boxStrokeColor">@color/TextViewColor_line</item>

4 - Définissez la couleur de l'erreur sous TextInputLayout.

<item name="boxStrokeErrorColor">@color/colorPrimary</item>
Muhammad Maqsood
la source
0

Je voulais seulement changer la couleur de l'étiquette lorsqu'elle est remontée vers le haut. Mais le réglage textColorHintchange la couleur à chaque état. Donc, cela a fonctionné pour moi:

   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       ...
        <item name="colorControlActivated">@color/colorPrimary</item>
       ...
    </style>

Cela changera la couleur lorsque l'entrée sera focalisée.

Deb
la source