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.