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.