如何在验证出错或文本为空时将EditText边框改为红色？

Got it, let's break down how to achieve that red border effect for EditText when validation fails (like empty input or invalid content) — this is a common UI requirement for form validation, and I'll walk you through two reliable approaches.

Method 1: Using TextInputLayout (Material Design Recommended) #

This is the modern, cleanest approach if you're using Material Components, since it handles error states out of the box and integrates seamlessly with form validation workflows.

1. Add Material Components Dependency
   First, make sure you have the latest Material Design dependency in your module-level build.gradle:

   implementation 'com.google.android.material:material:1.11.0' // Use the latest stable version
   

2. Update Your Layout XML
   Wrap your EditText inside a TextInputLayout — this component manages error visibility and styling:

   <com.google.android.material.textfield.TextInputLayout
       android:id="@+id/text_input_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:errorEnabled="true"
       app:boxStrokeErrorColor="@color/red"> <!-- Defines the red border color for error state -->
   
       <com.google.android.material.textfield.TextInputEditText
           android:id="@+id/edit_text"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="Enter your input"/>
   
   </com.google.android.material.textfield.TextInputLayout>
   

   • app:errorEnabled="true" ensures the error state can be displayed.
   • app:boxStrokeErrorColor directly sets the border color when an error is triggered.

3. Handle Validation in Code
   In your Activity/Fragment, check for empty input or validation failures and toggle the error state:

   val editText = findViewById<TextInputEditText>(R.id.edit_text)
   val textInputLayout = findViewById<TextInputLayout>(R.id.text_input_layout)
   
   // Example: Trigger validation on a button click
   submit_btn.setOnClickListener {
       val input = editText.text.toString().trim()
       if (input.isEmpty()) {
           textInputLayout.error = "This field can't be empty"
       } else {
           // Clear error when validation passes
           textInputLayout.error = null
       }
   }
   

   Setting a non-null error message will automatically switch the border to red, just like your example shows.

Method 2: Custom Drawables for Traditional EditText #

If you're not using Material Components, you can create custom drawables to switch between normal and error states manually.

1. Create Normal State Drawable (edittext_normal.xml)
   Place this in res/drawable:

   <shape xmlns:android="http://schemas.android.com/apk/res/android">
       <solid android:color="@android:color/white"/>
       <stroke android:width="1dp" android:color="@color/grey"/>
       <corners android:radius="4dp"/>
   </shape>
   

2. Create Error State Drawable (edittext_error.xml)

   <shape xmlns:android="http://schemas.android.com/apk/res/android">
       <solid android:color="@android:color/white"/>
       <stroke android:width="1dp" android:color="@color/red"/>
       <corners android:radius="4dp"/>
   </shape>
   

3. Create State List Drawable (edittext_border.xml)
   This drawable switches between states based on the EditText's error status:

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/edittext_error" android:state_error="true"/>
       <item android:drawable="@drawable/edittext_normal"/>
   </selector>
   

4. Apply to EditText in Layout

   <EditText
       android:id="@+id/edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/edittext_border"
       android:hint="Enter your input"/>
   

5. Trigger Error State in Code
   Use setError() to activate the error state (this triggers the state_error flag in the drawable):

   val editText = findViewById<EditText>(R.id.edit_text)
   
   submit_btn.setOnClickListener {
       val input = editText.text.toString().trim()
       if (input.isEmpty()) {
           editText.setError("This field can't be empty")
       } else {
           editText.setError(null)
       }
   }
   

Both methods will give you the red border effect when validation fails, matching your example's behavior. The TextInputLayout method is preferred for modern Android apps as it's part of Material Design and offers extra features like floating error messages.

内容的提问来源于stack exchange，提问作者Shriya D.S