Come modificare il colore dell'etichetta mobile di TextInputLayout

Con riferimento al nuovo TextInputLayoutrilasciato da Google, come posso cambiare il colore del testo dell'etichetta mobile?

Impostazione colorControlNormal, colorControlActivated, colorControlHighLightin stili non aiuta.

Questo è quello che ho ora:

Prova il codice qui sotto Funziona nello stato normale

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

Nella cartella Stili Codice etichetta testo

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

Impostato sul tema principale dell'app, funziona solo Evidenzia solo stato

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

Aggiornare:

UnsupportedOperationException: impossibile convertire in colore: tipo = 0x2 in api 16 o versioni precedenti

Soluzione

Aggiornare:

Stai utilizzando la libreria dei componenti materiali

Puoi aggiungere le righe seguenti al tema principale

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

oppure vuoi colori diversi nello stato noraml e nello stato attivato e con personalizzazione segui il codice qui sotto

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

Aggiungi la riga in basso al tema principale oppure puoi impostare lo stile su textinputlayout nel tuo 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>

Trovata la risposta, utilizzare l' android.support.design:hintTextAppearanceattributo per impostare il proprio aspetto di etichetta mobile.

Esempio:

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

Non è necessario utilizzare android:theme="@style/TextInputLayoutTheme"per modificare il colore dell'etichetta mobile, poiché influirà sull'intero tema del piccolo TextView utilizzato come etichetta. Invece, potresti usare app:hintTextAppearance="@style/TextInputLayout.HintText"dove:

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

Fammi sapere se la soluzione funziona :-)

come posso cambiare il colore del testo dell'etichetta mobile?

Con la libreria Componenti materiali è possibile personalizzare il TextInputLayoutcolore del testo del suggerimento utilizzando (richiede la versione 1.1.0)

• Nel layout:

• app:hintTextColor attributo: il colore dell'etichetta quando viene compresso e il campo di testo è attivo

• android:textColorHint attributo: il colore dell'etichetta in tutti gli altri stati dei campi di testo (come riposo e disabilitato)

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

• estendere uno stile materiale 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>

Il selettore predefinito per android:textColorHintè:

<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, quindi, ho trovato questa risposta molto utile e grazie a tutte le persone che hanno contribuito. Solo per aggiungere qualcosa, però. La risposta accettata è davvero la risposta corretta ... MA ... nel mio caso, stavo cercando di implementare il messaggio di errore sotto il EditTextwidget con app:errorEnabled="true"e questa singola riga mi ha reso la vita difficile. sembra che questo abbia la precedenza sul tema che ho scelto android.support.design.widget.TextInputLayout, che ha un diverso colore del testo definito da android:textColorPrimary.

Alla fine ho iniziato ad applicare un colore di testo direttamente al EditTextwidget. Il mio codice è simile al seguente:

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>

E il mio 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>

Ora visualizza il colore del testo nero anziché il textColorPrimarybianco.

Ti suggerisco di creare un tema di stile per TextInputLayout e cambiare solo il colore dell'accento. Imposta genitore sul tema della tua app base:

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

Nell'ultima versione della libreria di supporto (23.0.0+), TextInputLayoutaccetta il seguente attributo in XML per modificare il colore dell'etichetta mobile:android:textColorHint="@color/white"

Invece di Brahmam Yamani, preferisco usare Widget.Design.TextInputLayout come genitore. Ciò garantisce che tutti gli elementi richiesti siano presenti, anche se non tutti gli articoli vengono sovrascritti. Nella risposta di Yamanis, l'app andrà in crash con una risorsa irrisolvibile, se viene chiamato setErrorEnabled (true).

Cambia semplicemente lo stile nel modo seguente:

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

Nel mio caso ho aggiunto questo " app:hintTextAppearance="@color/colorPrimaryDark"nel mio widget TextInputLayout.

A livello di programmazione è possibile utilizzare:

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

spiegazione:

Ottieni il valore di colore int da una risorsa colore (un modo per presentare i colori rgb utilizzati da Android). Ho scritto ColorEnabled, ma in realtà dovrebbe essere, per questa risposta, ColorHintExpanded e ColorViewCollapsed. Ad ogni modo questo è il colore che vedrai quando il suggerimento di una vista "TextInputLayout" è nello stato Espanso o Compresso; lo imposterai usando il prossimo array sulla funzione "setDefaultHintTextColor" della vista. Riferimento: riferimento per TextInputLayout - cerca in questa pagina il metodo "setDefaultHintTextColor" per maggiori informazioni

Guardando ai documenti sopra puoi vedere che le funzioni impostano i colori per il suggerimento Espanso e Compresso usando un ColorStateList.

Documenti ColorStateList

Per creare ColorStateList ho prima creato una matrice con gli stati che desidero, nel mio caso state_enabled & state_disabled (i cui sono, in TextInputLayout, equivalgono a Hint Expanded e Hint Collapsed [Non ricordo in quale ordine lol, comunque l'ho trovata sto solo facendo un test]). Quindi passo al costruttore del ColorStateList gli array con valori int delle risorse di colore, questi colori hanno una corrispondenza con la matrice degli stati (ogni elemento nella matrice dei colori corrisponde al rispettivo array nella matrice degli stati nella stessa posizione). Quindi il primo elemento dell'array colors verrà usato come colore per ogni stato nel primo array della matrice degli stati (nel nostro caso l'array ha solo 1 elemento: enabled state = hint stato espanso per TextInputLayut). Gli stati delle ultime cose hanno valori positivi / negativi e tu hai solo i valori positivi,

Spero sia utile. Ciao buona codifica (:

Per cambiare il colore del suggerimento e modificare il testo sottolinea il colore: colorControlActivated

Per cambiare il colore del contatore caratteri: textColorSecondary

Per cambiare il colore del messaggio di errore: colorControlNormal

Per modificare la tinta del pulsante di visibilità della password: colorForeground

Per maggiori informazioni su TextInputLayout leggi 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>

dovresti cambiare il tuo colore qui

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

Ora, semplicemente usando colorAccente colorPrimaryfunzionerà perfettamente.

Risolvo il problema. Questo è 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>

Questo è stile:

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

È necessario utilizzare il tema nell'applicazione:

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

per cambiare il colore dell'etichetta di testo quando ci si concentra su di essa. cioè digitandolo. devi aggiungere specificare

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

Solo una nota: devi aggiungere tutte queste implementazioni al tuo tema principale.

Funziona per me ..... aggiungi il colore del suggerimento 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>

Ho provato ad usare android: textColorHint in android.support.design.widget.TextInputLayout funziona bene.

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

aggiungi questo agli stili e imposta TextInputLayout Theam su App2 e funzionerà;)

<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 / valori / styles.xml

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

Puoi usare app:hintTextColorse lo usi com.google.android.material.textfield.TextInputLayout, prova questo

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

Prova il codice qui sotto Funziona nello stato normale

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

Nella cartella Stili Codice etichetta testo

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

Dalla documentazione:

Il suggerimento deve essere impostato su TextInputLayout, anziché su EditText. Se viene specificato un suggerimento su EditText figlio in XML, TextInputLayout potrebbe comunque funzionare correttamente; TextInputLayout utilizzerà il suggerimento di EditText come etichetta mobile. Tuttavia, le chiamate future per modificare il suggerimento non aggiorneranno il suggerimento di TextInputLayout. Per evitare comportamenti indesiderati, chiama setHint (CharSequence) e getHint () su TextInputLayout, anziché su EditText.

Quindi ho impostato android:hinte app:hintTextColoracceso TextInputLayout, non acceso TextInputEditTexte funzionava.

Perché è necessario aggiungere colorControlNormal, colorControlActivated, colorControlHighLightelementi a tema principale:

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