Cách thêm icon vào EditText trên Android

Giới thiệu

Bài viết hướng dẫn cách đặt icon (drawable) vào bên trong EditText bằng thuộc tính XML android:drawableStart, android:drawableEnd, android:drawableLeft, android:drawableRight. Đây là cách đơn giản nhất, không cần code Java/Kotlin.

Các bước thực hiện

Bước 1: Tạo project mới

Android Studio → File → New Project → Empty Activity.

Bước 2: Tạo drawable background bo góc (res/drawable/bg_edittext_rounded.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>

Bước 3: Giao diện (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_marginHorizontal="16dp"
        android:paddingVertical="12dp"
        android:paddingHorizontal="16dp"
        android:background="@drawable/bg_edittext_rounded"
        android:hint="Tìm kiếm..."
        android:drawableStart="@android:drawable/ic_menu_search"
        android:drawablePadding="12dp"
        android:inputType="text" />

</LinearLayout>

Các thuộc tính drawable quan trọng

Xử lý sự kiện click vào icon (nâng cao)

Nếu muốn xử lý khi người dùng click vào icon (ví dụ: icon xóa text, icon mic), cần dùng TextWatcher hoặc custom TouchListener:

editText.setOnTouchListener { v, event ->
    if (event.action == MotionEvent.ACTION_UP) {
        val drawableEnd = v.getCompoundDrawables()[2] // Index 2 = End/Right
        if (drawableEnd != null) {
            val bounds = drawableEnd.bounds
            val x = event.x
            val width = v.width - v.paddingEnd - bounds.width()
            if (x >= width) {
                // Click vào icon end
                editText.text.clear()
                return@setOnTouchListener true
            }
        }
    }
    false
}

Sử dụng Material Design TextInputLayout (Khuyến nghị)

Với Material Components, nên dùng TextInputLayout có sẵn startIcon và endIcon:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    app:startIconDrawable="@android:drawable/ic_menu_search"
    app:endIconDrawable="@drawable/ic_clear"
    app:endIconMode="clear_text">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

Cần thêm dependency: implementation 'com.google.android.material:material:1.9.0+'