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.

Nitesh Verma
quelle
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
Mögliches Duplikat von EditText unterstrichen unter
Anirudh Sharma
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

Pankaj Arora
quelle
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

Douglas Nassif Roma Junior
quelle
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"
    ...>
Gabriele Mariotti
quelle
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"
pm dubey
quelle
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));
        }
    }
});
Patryk Lenza
quelle
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).

Farbod Salamat-Zadeh
quelle
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.

Fedor Kazakov
quelle
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

Komal Nikhare
quelle
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"
...
Paul Spiesberger
quelle
Verwenden Sie Widget.MaterialComponents.TextInputLayout.OutlinedBox im übergeordneten
Element