wie man die Farbe von TextinputLayout's Label ändert und edittext Android unterstreicht


119

Ich benutze Android Design-Bibliotheken TextinputLayout. Die Hinweisfarbe, die Etikettenfarbe und die Unterstreichungsfarbe der EditTextInnenseite konnten jedoch nicht angepasst werden TextinputLayout. Bitte helfen Sie.


1
Es sollte die Akzentfarbe gemäß den Designrichtlinien haben, oder?
Raghunandan

Ja, aber ich werde viele editTexts mit Farben haben, die sich von der Akzentfarbe des Themas unterscheiden.
Nitesh Verma


Bitte überprüfen Sie meine Antwort hier , um die Etikettenfarbe zu ändern
Summved Jain

Ich könnte die Unterstreichung sowohl im fokussierten als auch im nicht fokussierten Zustand zuverlässig ändern, indem ich einen benutzerdefinierten Hintergrund verwende, der in stackoverflow.com/a/36543554/2413303
EpicPandaForce,

Antworten:


254

Grundfarbe ändern:

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

Weitere Informationen finden Sie in diesem Thread .

Ändern Sie die Hinweisfarbe, wenn sie schwebt

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

und benutze es so:

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

Ändern Sie die Hinweisfarbe, wenn es sich nicht um ein schwebendes Etikett handelt:

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

Vielen Dank an @AlbAtNf


Ich kann die Hinweisfarbe nicht ändern (wenn sie nicht beschriftet ist). Können Sie mir helfen?
Nitesh Verma

Ich bin wirklich besorgt über meine App-Größe, wenn man bedenkt, wie viel zusätzliche Größe für meine App erwartet wird?
Nitesh Verma

Entschuldigung, habe deine Frage nicht bekommen, bitte erkläre mehr, Größe in welchem ​​Kontext, Grafikgröße des App-Gewichts (wie apk ist über 20 MB oder so), und früher akzeptierst du meine Antwort und wieder entfernst du deine Akzeptanz, kann ich fragen , y so?
Pankaj Arora

Weil ich nach deiner Antwort die Farbe des Hinweises nicht ändern konnte. Ein Teil davon hat bei mir funktioniert, aber dies ist keine vollständige Lösung für das, was ich gefragt habe. In Bezug auf die App-Größe erhöht das Hinzufügen einer externen Bibliothek wie Material EdiTText nicht die App-Größe?
Nitesh Verma

4
@NiteshVerma fand die Lösung für Einstellung Hinweis Farbe, wenn es nicht ein schwimmendes Label ist: einfach eingestellt , android:textColorHintum TextInputLayoutin XML.
AlbAtNf

30

Basierend auf Fedor Kazakov und anderen Antworten habe ich eine Standardkonfiguration erstellt.

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>

Konzentriert:

Konzentriert

Ohne Fokus:

Ohne Fokus

Fehlermeldung:

Geben Sie hier die Bildbeschreibung ein


8
Was soll ich tun, um auch für das Beispiel "Ohne Fokus" eine rosa Farbe zu erhalten?
John Smith

Wie benutzt man diesen Stil?
Hanzala

22

Mit der Materialkomponentenbibliothek können Sie die com.google.android.material.textfield.TextInputLayout.

Sie können einen benutzerdefinierten Stil anwenden, um die Farben zu ändern.

Um die Hinweisfarbe zu ändern , müssen Sie die folgenden Attribute verwenden:
hintTextColorund 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>

Sie sollten einen Selektor für die verwenden android:textColorHint. Etwas wie:

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

Um die Grundfarbe zu ändern , müssen Sie das Attribut verwenden : boxStrokeColor.

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

Auch in diesem Fall sollten Sie einen Selektor verwenden. Etwas wie:

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

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Sie können diese Attribute auch in Ihrem Layout anwenden:

<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
Wie ändere ich die Unterstreichungsfarbe von EditText in TextinputLayout? Ich meine unkonzentrierten Zustand. Es ist gräulich
Evgenii Vorobei

@ EvgeniiVorobei Es ist in der Antwort beschrieben. Es ist definiert durch die boxStrokeColor. Im Beispiel die selector_stroke_colorinsbesondere die letzte Zeile:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
Gabriele Mariotti

Vielen Dank! Ich konnte es nicht selbst herausfinden.
Evgenii Vorobei

19

Fügen Sie dieses Attribut in das Edittext-Tag ein und genießen Sie:

 android:backgroundTint="@color/colorWhite"

5
Effekt: Ändert die Linienfarbe auf Geräten mit API-Level 21 und höher
Jemand irgendwo

17

Dieser Blog-Beitrag beschreibt verschiedene Styling-Aspekte von EditTextund AutoCompleteTextViewverpackt von TextInputLayout.

Für EditTextund AppCompat lib 22.1.0+ können Sie das Themenattribut mit einigen themenbezogenen Einstellungen festlegen :

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

und wenden Sie sie an EditText:

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

Denn die AutoCompleteTextViewDinge sind komplizierter, weil das Einwickeln TextInputLayoutund Anwenden dieses Themas das Verhalten von schwebenden Etiketten unterbricht. Sie müssen dies im Code beheben:

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

und 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

Wenn Sie die Balken- / Linienfarbe und die Hinweistextfarbe von TextInputLayout(wie die Akzentfarbe normalerweise ist) ändern möchten, erstellen Sie einfach diesen Stil:

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

Dann bewerben Sie es zu Ihrem TextInputLayoutals Thema :

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

Dies setzt im Grunde ein Thema (nicht einen Stil) auf eine Ansicht (im Gegensatz zur gesamten Aktivität).


Ihr Min SDK sollte 21 sein
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>

Sie können diesen Stil für das Layout überschreiben

Außerdem können Sie den inneren EditText-Elementstil ändern.


Wie benutzt man diesen Stil? Gibt es eine Möglichkeit, den Stil aller Apps an einem Ort zu überschreiben?
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>

Wenden Sie diesen Stil auf TextInputLayout an


2
Nur eine kurze Anmerkung zum Anwenden des Stils auf TextInputLayout:android:theme="@style/EditScreenTextInputLayoutStyle"
Jackycflau

5

A TextinputLayoutist keine Ansicht, sondern a Layout, wie sehr schön von Dimitrios Tsigouris in seinem Blog-Beitrag hier beschrieben . Daher brauchen Sie kein Style, was nur für ist Views, sondern verwenden Sie ein Theme. Nach dem Blog-Beitrag kam ich zu folgender Lösung:

Beginnen Sie in Ihrem styles.xmlmit

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

Und in Ihrem Layout hinzufügen

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

Verwenden Sie Widget.MaterialComponents.TextInputLayout.OutlinedBox im übergeordneten
Element
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.