วิธีเพิ่มรูปภาพใน EditText บน Android

ภาพรวม

บทความนี้สอนวิธีใส่ไอคอน/รูปภาพเข้าไปใน EditText โดยใช้แอตทริบิวต์ android:drawableStart, android:drawableEnd, android:drawableLeft, หรือ android:drawableRight

ขั้นตอนที่ 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="5dp"
        android:paddingLeft="5dp"
        android:background="@drawable/rounded_edittext"
        android:drawableEnd="@android:drawable/ic_menu_search"
        android:hint="ค้นหา..." />

</LinearLayout>

ใช้ android:drawableEnd วางไอคอนค้นหาที่ปลายขวา และ android:background ใช้ drawable แบบโค้งมน

ขั้นตอนที่ 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>

คุณสมบัติ Drawable ที่ใช้ได้

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

ใช้ android:drawablePadding เพื่อเพิ่มระยะห่างระหว่างข้อความกับรูปภาพ

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

ทดสอบ

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