วิธีตั้งค่ารูปภาพคงที่ใน EditText (Static Drawable)

ภาพรวม

บทความนี้สาธิตวิธีเพิ่มรูปภาพ/ไอคอนคงที่ใน EditText ผ่าน XML โดยไม่ต้องเขียนโค้ด Java/Kotlin

ขั้นตอนที่ 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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingStart="15dp"
        android:paddingLeft="15dp"
        android:paddingEnd="15dp"
        android:paddingRight="15dp"
        android:background="@drawable/rounded_edittext"
        android:drawableStart="@android:drawable/ic_menu_search"
        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>

แอตทริบิวต์สำคัญ

ใช้รูปภาพของตัวเอง

วางไฟล์ใน res/drawable/ic_search.xml (Vector) หรือ .png/.webp แล้วอ้างอิง:

android:drawableStart="@drawable/ic_search"

ปรับขนาดรูปภาพ

XML ไม่สามารถปรับขนาด drawable ได้โดยตรง วิธีแก้:

• ใช้ Vector Asset (.xml) ที่กำหนด viewportSize เอง
• สร้าง LayerDrawable ในโค้ด
• ใช้ ImageSpan ใน SpannableString (ซับซ้อนกว่า)

ตัวอย่างใช้รูปด้านขวา (Clear Button)

<EditText
    ...
    android:drawableEnd="@android:drawable/ic_menu_close_clear_cancel"
    android:drawablePadding="8dp" />

ในโค้ดจัดการคลิก:

editText.setOnTouchListener((v, event) -> {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        Drawable drawableEnd = editText.getCompoundDrawables()[2]; // index 2 = right/end
        if (drawableEnd != null && event.getRawX() >= (editText.getRight() - drawableEnd.getBounds().width())) {
            editText.setText("");
            return true;
        }
    }
    return false;
});

ทดสอบ

รันแอป จะเห็น EditText มีกรอบโค้งมน และไอคอนค้นหาอยู่ด้านซ้ายคงที่