come cambiare il colore dell'etichetta di TextinputLayout e di edittext sottolinea Android


121

Sto usando la libreria di progettazione Android TextinputLayout. Ma non è stato possibile personalizzare il colore del suggerimento, il colore dell'etichetta e il colore della sottolineatura EditTextall'interno TextinputLayout. Per favore aiuto.


1
Dovrebbe avere il colore dell'accento in base alle linee guida di progettazione, giusto?
— Raghunandan

sì, ma avrò molti editText con colori diversi dal colore principale del tema.
— Nitesh Verma


Si prega di controllare la mia risposta qui per cambiare il colore dell'etichetta
— Summved Jain

Potrei cambiare sottolineatura in modo affidabile sia concentrata e lo stato sfocata utilizzando drawable sfondo personalizzato specificato nel stackoverflow.com/a/36543554/2413303
— EpicPandaForce

Risposte:


257

Cambia il colore della linea di fondo:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

Per maggiori informazioni controlla questo thread .

Cambia il colore del suggerimento quando è fluttuante

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

e usalo in questo modo:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

Cambia il colore del suggerimento quando non è un'etichetta mobile:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

Grazie a @AlbAtNf


Non riesco a cambiare il colore del suggerimento (quando non è etichettato). Puoi aiutarmi?
— Nitesh Verma

Sono davvero preoccupato per le dimensioni della mia app, considerando che, qualche idea su quante dimensioni aggiuntive è prevista per la mia app?
— Nitesh Verma

scusa, non ho ricevuto la tua domanda, per favore spiega di più, dimensione in quale contesto, dimensione grafica del peso dell'app (come l'apk è superiore a 20 MB o qualcosa del genere), e prima accetti la mia risposta e di nuovo rimuovi la tua accettazione, posso chiedere , e così?
— Pankaj Arora

perché non ho potuto cambiare il colore del suggerimento dopo la tua risposta. Alcune parti hanno funzionato per me, ma questa non è una soluzione completa a ciò che ho chiesto Per quanto riguarda le dimensioni dell'app, l'aggiunta di una libreria esterna come Material EdiTText non aumenta le dimensioni dell'app?
— Nitesh Verma

4
@NiteshVerma ha trovato la soluzione per l'impostazione Hint a colori, quando non è un flottante etichetta: è sufficiente impostare android:textColorHinta TextInputLayoutin XML.
— AlbAtNf

30

Basato su Fedor Kazakov e altre risposte, ho creato una configurazione predefinita.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

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

Focalizzata:

focalizzata

Senza focus:

Senza focus

Messaggio di errore:

inserisci qui la descrizione dell'immagine


9
Cosa devo fare per ottenere anche il colore rosa per l'esempio "Senza messa a fuoco"?
— John Smith

come usare questo stile?
— Hanzala

24

Con la Material Components Library puoi usare il file com.google.android.material.textfield.TextInputLayout.

È possibile applicare uno stile personalizzato per modificare i colori.

Per cambiare il colore del suggerimento devi usare questi attributi:
hintTextColore android:textColorHint.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</item>
</style>

Dovresti usare un selettore per android:textColorHint. Qualcosa di simile a:

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

Per cambiare il colore linea di fondo è necessario utilizzare l'attributo: boxStrokeColor.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

Anche in questo caso dovresti usare un selettore. Qualcosa di simile a:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine

Puoi anche applicare questi attributi nel tuo layout:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

1
Come cambiare il colore della sottolineatura di EditText all'interno di TextinputLayout? Intendo uno stato sfocato. È grigiastro
— Evgenii Vorobei

@EvgeniiVorobei È descritto nella risposta. È definito da boxStrokeColor. Nell'esempio selector_stroke_colorin particolare l'ultima riga:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
— Gabriele Mariotti

Grazie mille! Non sono riuscito a capirlo da solo.
— Evgenii Vorobei

il mio problema è che voglio che il colore del suggerimento sia grigio e una volta riempito il testo dell'editor, voglio che sia arancione, indipendentemente dal fatto che sia focalizzato o meno. sono in grado di farlo quando è concentrato. ma non è in grado di farlo quando non lo è. Quindi chan mi aiuti con esso @GabrieleMariotti
— Anmol317

19

Aggiungi questo attributo nel tag Edittext e divertiti:

 android:backgroundTint="@color/colorWhite"

5
effetto: cambia il colore della linea sui dispositivi con API di livello 21 e superiore
— Someone Somewhere

17

Questo post sul blog descrive vari aspetti stilistici di EditTexte AutoCompleteTextViewavvolti da TextInputLayout.

Per EditTexte AppCompat lib 22.1.0+ puoi impostare l'attributo del tema con alcune impostazioni relative al tema:

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

e applicali su EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

Perché le AutoCompleteTextViewcose sono più complicate perché avvolgerlo TextInputLayoute applicare questo tema interrompe il comportamento dell'etichetta mobile. Devi risolvere questo problema nel codice:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

e in Activity.onCreate:

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});

8

Se vuoi cambiare il colore della barra / linea e il colore del testo del suggerimento di TextInputLayout(quale è normalmente il colore dell'accento), crea semplicemente questo stile:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

Quindi applicalo al tuo TextInputLayoutcome tema :

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

Questo fondamentalmente imposta un tema (non uno stile) su una visualizzazione (al contrario dell'intera attività).


Il tuo Min SDK dovrebbe essere 21
— Azizjon Kholmatov

5
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

Puoi sovrascrivere questo stile per il layout

E puoi anche cambiare lo stile dell'elemento EditText interno.


come usare questo stile? c'è un modo per sovrascrivere lo stile di tutte le app in un unico posto?
— Hanzala

5
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

applica questo stile a TextInputLayout


2
solo una breve nota per applicare lo stile a TextInputLayout:android:theme="@style/EditScreenTextInputLayoutStyle"
— jackycflau

5

A TextinputLayoutnon è una vista, ma una Layout, come descritto molto bene da Dimitrios Tsigouris nel suo post sul blog qui . Pertanto, non hai bisogno di un Style, che è Viewssolo per , ma usa un fileTheme . Dopo il post sul blog, ho trovato la seguente soluzione:

Inizia nel tuo styles.xmlcon

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

E nel tuo layout aggiungi

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

1
Usa Widget.MaterialComponents.TextInputLayout.OutlinedBox nel genitore
— Sudip Sadhukhan
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.