Bagaimana cara mengatur warna pesan kesalahan TextInputLayout?


90

Bagaimana cara mengubah warna pesan kesalahan yang dapat diatur agar muncul di bawah bidang teks dalam TextInputLayout(melalui setError(...)- lihat status kesalahan di sini )?

Biasanya terlihat sebagai warna merah, yang ingin saya ubah. Nama / kunci item mana yang harus saya gunakan di styles.xmlfile saya untuk menargetkan warna?

Terima kasih sebelumnya.


Edit:

Menambahkan app:errorTextAppearancekunci ke saya 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>

dan tampilan kesalahan (disetel menjadi hijau untuk pengujian) :

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

Hasilnya adalah petunjuk serta pesan kesalahan diberi warna (tangkapan layar dari Android Emulator yang diskalakan) :

Reguler (tidak ada kesalahan):

Sebelum Gambar

Status kesalahan:

Setelah Gambar

Edit 2 / Hasil:

Saat pesan kesalahan muncul, petunjuk di atas bidang berubah menjadi warna yang sama dengan pesan kesalahan, mengganti warna petunjuk - ini sesuai desain.



Warna kesalahan menggantikan warna petunjuk dalam status kesalahan. Ini memang disengaja. Lihat google.com/design/spec/components/… Anda tidak dapat mengatasi masalah ini tanpa mengubah kelas TextInputLayout.
Eugen Pechanec

@EugenPechanec Saya tidak menyadari ini masalahnya. Terima kasih telah menjelaskan
Seb Jachec

1
@EugenPechanec Saya cukup yakin Anda salah di sini. Bagian yang Anda maksud berasal dari penghitung karakter. Untuk kesalahan bidang normal akan terlihat seperti pada gambar ini (perhatikan bahwa petunjuk tidak berwarna) material-design.storage.googleapis.com/publish/material_v_4/…
Arkadiusz 'terbang' Rzadkowolski

2
@EugenPechanec code.google.com/p/android/issues/detail?id=195775 - itu memang kesalahan dan akan diperbaiki dalam rilis mendatang :)
Arkadiusz 'terbang' Rzadkowolski

Jawaban:


140

Buat gaya kustom yang digunakan @android:style/TextAppearancesebagai induk di styles.xmlfile Anda :

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

Dan gunakan di widget TextInputLayout Anda:

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

contoh kesalahan

Edit: Mengatur petunjuk pada objek, yang ada di dalam TextInputLayout Anda ( EditText, TextView, dll) untuk menahan warna yang berbeda untuk petunjuk dan kesalahan.


1
Terima kasih. Tampak mudah tetapi tidak dapat menemukannya untuk kehidupan saya!
Seb Jachec

2
Pembaruan: Apakah mungkin untuk hanya mengubah gaya pesan kesalahan? Ini sepertinya juga mengubah gaya petunjuk di atas bidang.
Seb Jachec

Betulkah? Bukan untuk saya, lihat gambar di atas. Apakah Anda yakin Anda menetapkan gayanya app:errorTextAppearance?
dabo248

1
@EugenPechanec Sederhana terlihat seperti ini: <android.support.design.widget.TextInputLayout app:errorTextAppearance="@style/error_appearance"><AutoCompleteTextView android:hint="@string/prompt_email"/></android.support.design.widget.TextInputLayout>. Jadi ya, ini adalah TextView lain, itulah mengapa tidak mengambil warna kesalahan dari TextInputLayout.
dabo248

7
Jika Anda ingin hanya mengubah warna, yang terbaik yang Anda mengatur gaya ini parentuntuk parent="TextAppearance.Design.Error". Dengan cara itu, ia mempertahankan ukuran teks default dan atribut lainnya, tetapi mari kita sesuaikan secara khusus warna kesalahan, yang merupakan tujuan dari pertanyaan yang ada.
w3bshark

28

Sebenarnya, untuk hanya mengubah warna pesan kesalahan, Anda dapat mengatur textColorErrortema Anda (dan juga mengatur colorControlNormaldan colorControlActivateduntuk widget umum dan warna teks petunjuk). TextInputLayoutmengambil atribut itu. CATATAN: jika Anda mengatur errorTextAppearanceke gaya kustom maka tidak textColorErrorakan berpengaruh.

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

Dan di AndroidManifest.xml Anda:

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

    <!-- ... -->

</application>

17
Seseorang harus benar-benar menulis buku tentang tema dan gaya dan semua atribut yang mungkin. Ini benar-benar gila, Anda dapat mengatur warna dan gaya dengan banyak cara, dan tidak ada cara untuk mengetahui cara mana yang tepat. Dan tentunya tidak ada dokumentasi sama sekali :( Maksud saya ada tapi sangat membingungkan.
aleksamarkoni

ini adalah jawaban yang jauh lebih baik daripada jawaban yang lebih tinggi!
philthomas 26

6
Bagi saya, solusi ini menyebabkan kesalahan ( textColorErrortidak ditemukan), tetapi saya berhasil mengatur colorErroratribut di tema saya. Sepertinya setiap versi Android / Support Library memiliki atribut temanya sendiri.
Slav

9
Saya mendapatkan ' <item name="colorError">@color/error</item>
Penautan

4
Perbarui postingan .. textColorError sekarang menjadi colorError.
Matt Wolfe

7

Satu catatan samping. Saya telah mencoba solusi yang diterima dengan errorTextAppereance. Ini berfungsi dengan sangat baik tetapi pada awalnya, warna garis bawah masukan tidak berubah setelah menerapkan errorTextAppereancegaya baru . Saya melihat ada beberapa komentar dan orang lain mengalami masalah yang sama.

Dalam kasus saya, ini terjadi saat saya menyetel gaya baru setelah menyetel teks kesalahan baru. Seperti ini:

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

Setelah mengganti urutan kedua metode ini, teks dan warna garis bawah berubah seperti yang diharapkan.

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

Dan gaya tampilan teks kesalahan terlihat seperti ini:

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

Seperti apa R.style.InputError_Purple Anda?
toobsco42

Gaya @ toobsco42 hanya mendefinisikan warna teks. Saya telah mengedit jawabannya dengan implementasi yang sebenarnya.
Ivan Marić

Terima kasih! Saya menggunakan tampilan ini untuk teks yang valid dan teks kesalahan (hijau dan merah) dan warna garis bawah yang tidak berubah dengan benar membuat saya gila.
rexar5

6

Saya perlu melakukan ini secara dinamis. Menggunakan refleksi:

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();
  }
}

Anda perlu menelepon textInputLayout.setErrorEnabled(true)sebelum menjalankan metode di atas agar ini berfungsi.


Warna teks kesalahan berubah tetapi warna garis bawah tetap ada. Perubahan hanya pada panggilan berikutnya ke fungsi yang sama
Mohammad Shabaz Moosa

@ Dr.aNdRO Ini menggunakan refleksi, tidak dijamin akan selalu berhasil!
ucMedia

3

Dengan TextInputLayoutdisertakan dalam Material Components Library, cukup gunakan app:errorTextColoratributnya.

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

Dalam gaya khusus, Anda dapat menggunakan:

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

masukkan deskripsi gambar di sini


1

MEMPERBARUI

Silakan gunakan tampilan kustom sebagai gantinya dan bukan ini


Versi mod dari Answer @ jared yang berfungsi dalam kasus saya:

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();
    }
}

Warna teks kesalahan berubah tetapi warna garis bawah tetap ada. Perubahan hanya pada panggilan berikutnya ke fungsi yang sama
Mohammad Shabaz Moosa

2
Jangan gunakan ini. ini tidak dapat diandalkan seperti sekarang
Dr. aNdRO

0

Jika Anda menggunakan com.google.android.material.textfield.TextInputLayout tata letak masukan ini daripada Anda hanya menyetel satu gaya

<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

Tergantung pada kebutuhan, seseorang dapat mengubah / menyetel warna teks TextInputLayout secara dinamis atau langsung dalam file XML layout. Di bawah ini adalah contoh cuplikan kode

Buat gaya kustom yang menggunakan @android: style / TextAppearance sebagai induk di file styles.xml Anda :

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

Dan, gunakan di widget TextInputLayout Anda:

  1. Langsung di XML Layout
 <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. Secara dinamis di kelas Anda
your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

Jika Anda ingin menyetel warna teks kesalahan tunggal / sama untuk aplikasi Anda, maka tentukan warna teks dalam tema aplikasi Anda

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

Dan di AndroidManifest.xml Anda:

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

    <!-- ... -->

</application>

-2

Saya melihat ke dalam sumber TextInputLayout dan saya menyadari bahwa warna teks kesalahan didapat dari colors.xml. Cukup tambahkan ini ke colors.xml Anda:

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

Bekerja untuk saya dengan perpustakaan desain ditambahkan.
Java Geek
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.