技术实现咨询：如何在EditText输入内容时变更TextView颜色，以及用户输入匹配指定文本后实现如图所示的文本颜色更改

Hey there! Let's work through your Android UI questions together—these are common use cases for giving users real-time feedback, so I’ll break it down clearly.

The core idea here is to listen for every change in the EditText input and update the TextView's color immediately. We'll use Android's TextWatcher interface to hook into input events.

Step 1: Layout Setup #

First, add your EditText and TextView to your XML layout:

<!-- activity_main.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/inputEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here..."/>

    <TextView
        android:id="@+id/feedbackTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Your input will change my color!"
        android:textSize="18sp"/>
</LinearLayout>

Step 2: Implement TextWatcher in Code #

Here's the Kotlin implementation (I’ll note Java equivalents below):

// MainActivity.kt
import android.graphics.Color
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val inputEditText = findViewById<EditText>(R.id.inputEditText)
        val feedbackTextView = findViewById<TextView>(R.id.feedbackTextView)

        // Attach listener to monitor input changes
        inputEditText.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
                // Optional: Run code right before text changes (rarely needed)
            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                // Trigger color update every time input changes
                updateTextViewColor(s.toString(), feedbackTextView)
            }

            override fun afterTextChanged(s: Editable?) {
                // Optional: Run code after text finishes changing
            }
        })
    }

    // Customize this logic to fit your color rules
    private fun updateTextViewColor(inputText: String, textView: TextView) {
        when {
            inputText.isEmpty() -> textView.setTextColor(Color.GRAY)
            inputText.length < 5 -> textView.setTextColor(Color.BLUE)
            inputText.length >= 5 -> textView.setTextColor(Color.GREEN)
            // Add any other conditions (e.g., contains specific characters) here
        }
    }
}

Java Note: The logic is identical—just use anonymous inner classes for TextWatcher and adjust syntax (e.g., cast findViewById results, use Color.GRAY directly).

For this, we’ll extend the previous setup to check if the input exactly matches your target text (from the image description). We can even add styled text effects (like bold or colored highlights) to make the feedback clearer, just like your image shows.

Updated Implementation #

First, define your target text, then modify the color update function:

// Add this at the top of your activity class
private val TARGET_TEXT = "YourSpecifiedTextHere" // Replace with your image's target text

// Update the color function to check for matches
private fun updateTextViewColor(inputText: String, textView: TextView) {
    if (inputText == TARGET_TEXT) {
        // Match found: Apply styled feedback (adjust this to match your image's effect)
        val successMessage = android.text.SpannableString("✅ Perfect match!")
        // Add bold style
        successMessage.setSpan(
            android.text.style.StyleSpan(android.graphics.Typeface.BOLD),
            0, successMessage.length,
            android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        // Set green color (match your image's desired color)
        successMessage.setSpan(
            android.text.style.ForegroundColorSpan(Color.GREEN),
            0, successMessage.length,
            android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        textView.text = successMessage
    } else {
        // No match: Reset to default state
        textView.text = "❌ Input doesn't match the target"
        textView.setTextColor(Color.RED)
    }
}

Customization Tips #

• Ignore Case: Use inputText.equals(TARGET_TEXT, ignoreCase = true) if you don’t care about uppercase/lowercase differences.
• Partial Match: If you need to highlight parts of the TextView that match the input (instead of full match), use SpannableString to color only the matching substring.
• Exact Image Style: If your image shows specific effects (like underline or background color), add corresponding spans (e.g., UnderlineSpan() or BackgroundColorSpan()).

内容的提问来源于stack exchange，提问作者M.Salman Nazeer