Cách đặt icon cố định (drawableStart) cho EditText trên Android

Giới thiệu

Bài viết hướng dẫn cách đơn giản nhất để đặt icon cố định vào EditText chỉ bằng XML, không cần code Java/Kotlin. Sử dụng thuộc tính android:drawableStart (hoặc drawableLeft, drawableEnd, drawableRight).

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 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    android:padding="16dp">

    <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" />

</LinearLayout>

Các vị trí đặt icon

Thuộc tính bổ sung hữu ích

• android:drawablePadding="12dp": Khoảng cách giữa icon và text.
• android:paddingStart="16dp", android:paddingEnd="16dp": Padding nội bộ EditText.
• android:drawableTint="@color/primary" (API 23+): Đổi màu icon (tint).

Sử dụng icon tùy chỉnh

1. Đặt file icon (PNG, SVG/Vector) vào res/drawable/ (ví dụ: ic_search.xml).
2. Thay @android:drawable/ic_menu_search bằng @drawable/ic_search.

Cách tốt hơn: Material TextInputLayout

Với Material Components, 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="@drawable/ic_email"
    app:endIconDrawable="@drawable/ic_clear"
    app:endIconMode="clear_text"> <!-- Tự động ẩn/hiện clear icon -->

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

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

Ưu điểm: Hỗ trợ animation, error state, character counter, password toggle, clear text tự động...