Jak ustawić kolor komunikatu o błędzie TextInputLayout?


90

Jak mogę zmienić kolor komunikatu o błędzie, który można ustawić tak, aby pojawiał się pod polem tekstowym w TextInputLayout(przez setError(...)- zobacz stan błędu tutaj )?

Zwykle pokazuje się jako czerwony kolor, który chcę zmienić. Których nazw / kluczy elementów powinienem użyć w moim styles.xmlpliku, aby ustawić kolor?

Z góry dziękuję.


Edytować:

Dodano app:errorTextAppearanceklucz do mojego TextInputLayout:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:id="@+id/welcome_current_week_container"
        app:errorTextAppearance="@style/WelcomeErrorAppearance">
        <EditText
            ..../>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

i wygląd błędu (ustawiony na zielony do testowania) :

<style name="WelcomeErrorAppearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@android:color/holo_green_dark</item>
</style>

W rezultacie podpowiedź i komunikat o błędzie są kolorowe (zrzuty ekranu ze skalowanego emulatora Androida) :

Zwykły (bez błędu):

Przed obrazem

Stan błędu:

Po obrazie

Edycja 2 / wynik:

Gdy pojawia się komunikat o błędzie, podpowiedź nad polem zmienia się na ten sam kolor co komunikat o błędzie, zastępując kolor podpowiedzi - jest to zgodne z projektem.



Kolor błędu zastępuje kolor wskazówki w stanie błędu. Jest to zgodne z projektem. Wejdź na google.com/design/spec/components/… Nie możesz obejść tego problemu bez zmiany klasy TextInputLayout.
Eugen Pechanec

@EugenPechanec Nie zdawałem sobie sprawy, że tak jest. Dzięki za wyjaśnienie
Seb Jachec

1
@EugenPechanec Jestem prawie pewien, że się mylisz. Część, do której się odnosisz, pochodzi z licznika znaków. Dla normalnych pól błędy powinny wyglądać tak, jak na tym obrazku (zauważ, że podpowiedź nie jest kolorowa) material-design.storage.googleapis.com/publish/material_v_4/…
Arkadiusz „leci” Rzadkowolski

2
@EugenPechanec code.google.com/p/android/issues/detail?id=195775 - to rzeczywiście był błąd i zostanie naprawiony w przyszłej wersji :)
Arkadiusz „leci” Rzadkowolski

Odpowiedzi:


140

Utwórz własny styl, który będzie używany @android:style/TextAppearancejako element nadrzędny w Twoim styles.xmlpliku:

<style name="error_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red_500</item>
    <item name="android:textSize">12sp</item>
</style>

I użyj go w swoim widżecie TextInputLayout:

 <android.support.design.widget.TextInputLayout
            android:id="@+id/emailInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/error_appearance">

przykład błędu

Edit: Ustaw wskazówkę na obiekcie, który jest wewnątrz TextInputLayout ( EditText, TextViewetc.) do przechowywania różnych kolorów za podpowiedź i błędów.


1
Dzięki. Wydaje się proste, ale jakoś nie udało mi się tego znaleźć na całe życie!
Seb Jachec

2
Aktualizacja: Czy można po prostu zmienić styl komunikatu o błędzie? Wydaje się, że zmienia to również styl podpowiedzi nad polem.
Seb Jachec

Naprawdę? Nie dla mnie, spójrz na obrazek powyżej. Czy na pewno przypisujesz styl app:errorTextAppearance?
dabo248

1
@EugenPechanec uproszczony wygląda to tak: <android.support.design.widget.TextInputLayout app:errorTextAppearance="@style/error_appearance"><AutoCompleteTextView android:hint="@string/prompt_email"/></android.support.design.widget.TextInputLayout>. Więc tak, to kolejny TextView, dlatego nie przyjmuje koloru błędu z TextInputLayout.
dabo248

7
Jeśli chcesz zmienić tylko kolor, najlepiej ustawić styl parentna parent="TextAppearance.Design.Error". W ten sposób zachowuje domyślny rozmiar tekstu i wszelkie inne atrybuty, ale pozwala dostosować konkretnie kolor błędu, który był celem pytania.
w3bshark

28

Właściwie, aby zmienić tylko kolor komunikatu o błędzie, możesz ustawić textColorErrormotyw (a także ustawić colorControlNormali colorControlActivateddla ogólnego widżetu i koloru tekstu podpowiedzi). TextInputLayoutprzejmuje ten atrybut. UWAGA: jeśli ustawisz errorTextAppearancestyl niestandardowy, nie textColorErrorprzyniesie to żadnego efektu.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/control_normal</item>
    <item name="colorControlActivated">@color/control_activated</item>
    <item name="textColorError">@color/error</item>
    <!-- other styles... -->
</style>

A w pliku AndroidManifest.xml:

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

    <!-- ... -->

</application>

17
Ktoś naprawdę powinien napisać książkę o motywach i stylach oraz wszystkich możliwych atrybutach. To naprawdę szalone, możesz ustawić kolor i styl na wiele sposobów i nie ma sposobu, aby dowiedzieć się, który z nich jest właściwy. I oczywiście nie ma żadnej dokumentacji :( Mam na myśli, że jest, ale jest to naprawdę zagmatwane.
aleksamarkoni

to jest o wiele lepsza odpowiedź niż ta z wyższą punktacją!
philthomas 26

6
U mnie to rozwiązanie spowodowało błąd ( textColorErrornie znaleziono), ale udało mi się ustawić colorErroratrybut w moim motywie. Wydaje się, że każda wersja Android / Support Library ma własne atrybuty motywu.
Slav

9
Otrzymuję komunikat <item name="colorError">@color/error</item>
``

4
Proszę zaktualizować post .. textColorError to teraz colorError.
Matt Wolfe,

7

Jedna uwaga dodatkowa. Wypróbowałem przyjęte rozwiązanie errorTextAppereance. Działa naprawdę dobrze, ale początkowo kolor podkreślenia danych wejściowych nie zmieniał się po zastosowaniu nowego errorTextAppereancestylu. Widzę, że jest kilka komentarzy i że inni ludzie mają ten sam problem.

W moim przypadku działo się tak, gdy ustawiałem nowy styl po ustawieniu nowego tekstu błędu. Lubię to:

passwordInputLayout.error = "Password strength"
passwordInputLayout.setErrorTextAppearance(R.style.InputError_Purple)

Po zmianie kolejności tych dwóch metod tekst i kolor podkreślenia zmieniają się zgodnie z oczekiwaniami.

passwordInputLayout.setErrorTextAppearance(R.style.InputError_Purple)
passwordInputLayout.error = "Password strength"

A styl wyglądu tekstu błędu wygląda mniej więcej tak:

<style name="InputError" parent="TextAppearance.Design.Error"/>
<style name="InputError.Purple">
    <item name="android:textColor">@color/purple</item>
</style>

Jak wygląda Twój R.style.InputError_Purple?
toobsco42

Styl @ toobsco42 definiuje tylko kolor tekstu. Zmieniłem odpowiedź z rzeczywistą implementacją.
Ivan Marić

Dziękuję Ci! Używam tego widoku zarówno dla poprawnego tekstu, jak i tekstu błędu (zielony i czerwony), a niepoprawnie zmieniający się kolor podkreślenia doprowadzał mnie do szału.
rexar5

6

Musiałem to robić dynamicznie. Korzystanie z odbicia:

public static void setErrorTextColor(TextInputLayout textInputLayout, int color) {
  try {
    Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
    fErrorView.setAccessible(true);
    TextView mErrorView = (TextView) fErrorView.get(textInputLayout);
    Field fCurTextColor = TextView.class.getDeclaredField("mCurTextColor");
    fCurTextColor.setAccessible(true);
    fCurTextColor.set(mErrorView, color);
  } catch (Exception e) {
    e.printStackTrace();
  }
}

Aby to zadziałało, musisz zadzwonić textInputLayout.setErrorEnabled(true)przed wywołaniem powyższej metody.


Kolor tekstu błędu zmienia się, ale kolor podkreślenia nadal pozostaje Zmienia się tylko przy następnym wywołaniu tej samej funkcji
Mohammad Shabaz Moosa

@ Dr.aNdRO Wykorzystuje odbicie, nie ma gwarancji, że zadziała zawsze!
ucMedia

3

W przypadku elementu TextInputLayoutzawartego w bibliotece komponentów materiałów wystarczy użyć app:errorTextColoratrybutu.

    <com.google.android.material.textfield.TextInputLayout
        app:errorTextColor="@color/...."
        .../>

W niestandardowym stylu możesz użyć:

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

wprowadź opis obrazu tutaj


1

AKTUALIZACJA

Zamiast tego użyj widoku niestandardowego, a nie tego


Zmodyfikowana wersja odpowiedzi @ jared, która działa w moim przypadku:

public static void setErrorTextColor(TextInputLayout textInputLayout, int color) {
    try {
        Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
        fErrorView.setAccessible(true);
        TextView mErrorView = (TextView)fErrorView.get(textInputLayout);
        mErrorView.setTextColor(color);
        mErrorView.requestLayout();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Kolor tekstu błędu zmienia się, ale kolor podkreślenia nadal pozostaje Zmienia się tylko przy następnym wywołaniu tej samej funkcji
Mohammad Shabaz Moosa

2
Nie używaj tego. nie jest to na razie wiarygodne
Dr. aNdRO

0

Jeśli używasz com.google.android.material.textfield.TextInputLayout tego układu wejściowego, to wystarczy ustawić jeden styl

<com.google.android.material.textfield.TextInputLayout
                        android:id="@+id/textInputLayoutPassword"
                        style="@style/LoginTextInputLayoutStyle"



<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@color/text_input_box</item>
        <item name="errorTextColor">@color/colorRed</item>
    </style>

0

W zależności od potrzeb można zmieniać / ustawiać kolor tekstu TextInputLayout dynamicznie lub bezpośrednio w pliku XML układu. Poniżej znajdują się przykładowe fragmenty kodu

Utwórz styl niestandardowy, który używa @android: style / TextAppearance jako elementu nadrzędnego w pliku styles.xml :

<style name="style_error_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/color_error</item>
    <item name="android:textSize">11sp</item>
</style>

I użyj go w swoim widżecie TextInputLayout:

  1. Bezpośrednio w układzie XML
 <android.support.design.widget.TextInputLayout
            android:id="@+id/your_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/style_error_appearance">
  1. Dynamicznie w Twojej klasie
your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

Jeśli chcesz ustawić pojedynczy / ten sam kolor tekstu błędu dla swojej aplikacji, zdefiniuj kolor tekstu w motywie aplikacji

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Error text color... -->
    <item name="textColorError">@color/color_error</item>
    <!-- other styles... -->
</style>

A w pliku AndroidManifest.xml:

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

    <!-- ... -->

</application>

-2

Zajrzałem do źródła TextInputLayout i zdałem sobie sprawę, że kolor tekstu błędu jest pobierany z colors.xml. Po prostu dodaj to do swojego colors.xml:

<color name="design_textinput_error_color_light" tools:override="true">your hex color</color>

Działa dla mnie z dodaną biblioteką projektów.
Java Geek
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.