วิธีแสดงรูปภาพใน EditText ขณะพิมพ์ข้อความ (Dynamic Drawable)

ภาพรวม

บทความนี้สาธิตวิธีแสดง/ซ่อนรูปภาพใน EditText แบบไดนามิกขณะที่ผู้ใช้พิมพ์ข้อความ โดยใช้ TextWatcher และ setCompoundDrawables()

ขั้นตอนที่ 1: สร้างโปรเจกต์

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/edit_query"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingStart="5dp"
        android:paddingLeft="5dp"
        android:background="@drawable/rounded_edittext"
        android:hint="พิมพ์ข้อความ..." />

</LinearLayout>

ขั้นตอนที่ 3: พื้นหลังโค้งมน (res/drawable/rounded_edittext.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#2f6699" />
    <corners android:radius="10dp" />
</shape>

ขั้นตอนที่ 4: โค้ดหลัก (java/MainActivity.java)

package com.example.myapplication;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final EditText editText = findViewById(R.id.edit_query);

        // โหลดรูปภาพจาก drawable (ต้องมีไฟล์ sir.png หรือ sir.xml ใน res/drawable)
        final Drawable image = getResources().getDrawable(R.drawable.sir, getTheme());
        if (image != null) {
            image.setBounds(0, 0, 80, 80); // กำหนดขนาด: left, top, right, bottom
        }

        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                // ก่อนเปลี่ยนแปลง - ไม่ต้องทำอะไร
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                // ขณะกำลังเปลี่ยนแปลง
                if (s.length() >= 3 && image != null) {
                    // แสดงรูปทางซ้ายเมื่อพิมพ์ครบ 3 ตัวอักษรขึ้นไป
                    editText.setCompoundDrawables(image, null, null, null);
                } else {
                    // ซ่อนรูป
                    editText.setCompoundDrawables(null, null, null, null);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {
                // หลังเปลี่ยนแปลงแล้ว
            }
        });
    }
}

คำอธิบาย setCompoundDrawables

setCompoundDrawables(
    Drawable left/start,   // ซ้าย
    Drawable top,          // บน
    Drawable right/end,    // ขวา
    Drawable bottom        // ล่าง
);

กรณีใช้งานจริง

• แสดงไอคอน "ถูก" ✓ เมื่อรหัสผ่านถูกต้อง
• แสดงไอคอน "ค้นหา" เมื่อพิมพ์คำค้นหา
• แสดงแอวตาร์ผู้ใช้เมื่อพิมพ์ username ครบ
• Validation แบบ real-time

ปรับปรุงประสิทธิภาพ

สำหรับการใช้งานจริง ควรโหลด Drawable ครั้งเดียว และ reuse:

// ใน onCreate
Drawable checkIcon = getDrawable(R.drawable.ic_check);
checkIcon.setBounds(0, 0, checkIcon.getIntrinsicWidth(), checkIcon.getIntrinsicHeight());

// ใน TextWatcher
editText.setCompoundDrawables(null, null, isValid ? checkIcon : null, null);

ทดสอบ

พิมพ์ 1-2 ตัวอักษร → ไม่มีรูป
พิมพ์ 3 ตัวอักษรขึ้นไป → รูปภาพปรากฏทางซ้ายของ EditText