Дизайн Android EditText відобразить повідомлення про помилку, як описано в Google


151

Мені потрібен такий, EditTextякий виглядає таким чином на Error:

введіть тут опис зображення

виклик onError виглядає так:

введіть тут опис зображення

Примітка: програма працює на SDK 19 (4.4.2)

хв SDK дорівнює 1

Чи існує метод, подібний до setError, який робить це автоматично, чи мені потрібно написати код для нього?

Дякую


1
Ви навряд чи зможете це зробити лише за допомогою EditText. Швидше за все, вам знадобиться щось, що загортає EditTextабо іншим чином додає до нього. Дивіться сторінку github.com/rengwuxian/MaterialEditText .
CommonsWare

Відповіді:


330

Немає необхідності користуватися сторонніми бібліотеками, оскільки Google представив цю TextInputLayoutчастину design-support-library.

Наведемо основний приклад:

Макет

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

</android.support.design.widget.TextInputLayout>

Примітка. Якщо встановити app:errorEnabled="true"як атрибут, TextInputLayoutвоно не змінить розмір, як тільки з’явиться помилка - тому в основному блокує простір.

Код

Щоб показати Помилку нижче, EditTextвам просто потрібно зателефонувати #setErrorна TextInputLayout(НЕ на дитину EditText):

TextInputLayout til = (TextInputLayout) findViewById(R.id.text_input_layout);
til.setError("You need to enter a name");

Результат

зображення, що показує текст редагування із повідомленням про помилку

Щоб приховати помилку та скинути відтінок, просто зателефонуйте til.setError(null).


Примітка

Для використання TextInputLayoutви повинні додати до своїх build.gradleзалежностей наступне :

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Встановлення користувальницького кольору

За замовчуванням рядок EditTextзаповіту буде червоним. Якщо вам потрібно відобразити інший колір, ви можете використовувати наступний код, як тільки ви зателефонували setError.

editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);

Для очищення просто викликайте clearColorFilterфункцію, наприклад:

editText.getBackground().clearColorFilter();

3
Так ! Це воно ! Як же ви зробите лінію червоною?
kmn

3
@kmn Якщо червона лінія не виходить з поля, тож вам потрібно зробити це самостійно. Дивіться мою редакцію. З точки зору переміщення підказки: це не можна.
reVerse

5
@Alessio Я просто намагався сказати, що це має працювати, коли ви розширюєте AppCompatActivity. Тим не менше: Що стосується appcompat-v23, більше не потрібно встановлювати colorFilter, як тільки ви викликаєте, textInputLayout.setError("Error messsage")колір EditTextмає стати червоним. Для того, щоб скинути його, достатньо зателефонувати textInputLayout.setError(null).
reVerse

3
editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);більше не потрібна з останньою бібліотекою підтримки
Антуан Болві

13
Просто хотів зазначити, оскільки це така невелика деталь - у мене виникли ці проблеми, викликавши setError на EditText, а не на TextInputLayout. Я побачив цю відповідь і все ще не міг зрозуміти, що мені потрібно змінити. Дуже легко пропустити річ.
h_k

8

Дзвінок myTextInputLayout.setError()замістьmyEditText.setError() .

Ці контейнери та контейнери мають подвійну функціональність при помилках налаштування. Функціонал, який вам потрібен, є контейнером. Але ви можете вимагати мінімальної версії 23 для цього.


7

Ваш EditTextмає бути загорнутий уTextInputLayout

<android.support.design.widget.TextInputLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tilEmail">

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/etEmail"
        android:hint="Email"
        android:layout_marginTop="10dp"
        />

</android.support.design.widget.TextInputLayout>

Щоб отримати повідомлення про помилку, як ви хотіли, встановіть помилку на TextInputLayout

TextInputLayout tilEmail = (TextInputLayout) findViewById(R.id.tilEmail);
if (error){
    tilEmail.setError("Invalid email id");    
}

Вам слід додати залежність бібліотеки підтримки дизайну. Додайте цей рядок у залежності від градусів

compile 'com.android.support:design:22.2.0'

4

Відповідь reVerse чудова, але вона не вказувала, як видалити річ із підказкою з плаваючою помилкою

Вам потрібно edittext.setError(null)буде видалити це.
Крім того, як хтось вказував, вам це не потрібноTextInputLayout.setErrorEnabled(true)

Макет

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter something" />
</android.support.design.widget.TextInputLayout>

Код

TextInputLayout til = (TextInputLayout) editText.getParent();
til.setError("Your input is not valid...");
editText.setError(null);


0

Якщо хтось досі стикається з помилкою з використанням бібліотеки дизайну google, як зазначено у відповіді, будь ласка, використовуйте це, як прокоментував @h_k, який є -

Замість виклику setError на TextInputLayout , можливо, ви використовуєте setError у самому EditText .


0
private EditText edt_firstName;
private String firstName;

edt_firstName = findViewById(R.id.edt_firstName);

private void validateData() {
 firstName = edt_firstName.getText().toString().trim();
 if (!firstName.isEmpty(){
//here api call for ....
}else{
if (firstName.isEmpty()) {
                edt_firstName.setError("Please Enter First Name");
                edt_firstName.requestFocus();
            } 
}
}

Відповідаючи на старе запитання, ваша відповідь була б набагато кориснішою для інших користувачів StackOverflow, якщо ви включили якийсь контекст, щоб пояснити, як допомагає ваша відповідь, особливо на запитання, на яке вже є прийнята відповідь. Див.: Як написати гарну відповідь .
Девід Бак
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.