Cách tạo EditText bo tròn (Rounded/Circular) trên Android

Giới thiệu

Bài viết hướng dẫn tạo EditText có góc bo tròn (rounded corners) bằng ShapeDrawable XML. Lưu ý: "Circular EditText" thường hiểu là bo góc, không phải hình tròn hoàn hảo (đó là CircleAvatar/ImageView).

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="1.5dp"
        android:color="#2F6699" />
    <corners android:radius="12dp" />
    <!-- Hoặc bo từng góc riêng: -->
    <!--
    <corners
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp"
        android:bottomLeftRadius="12dp"
        android:bottomRightRadius="12dp" />
    -->
    <padding
        android:left="12dp"
        android:top="8dp"
        android:right="12dp"
        android:bottom="8dp" />
</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:padding="16dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="16dp"
        android:background="@drawable/bg_edittext_rounded"
        android:hint="Nhập nội dung..."
        android:paddingVertical="12dp"
        android:paddingHorizontal="16dp"
        android:textSize="16sp" />

</LinearLayout>

Các biến thể ShapeDrawable

1. Bo góc không đồng đều (Pill/Capsule shape)

<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#DDDDDD" />
    <corners android:radius="50dp" /> <!-- Lớn hơn chiều cao/2 -> hình capsule -->
</shape>

2. Chỉ bo 2 góc trên (Top rounded)

<corners
    android:topLeftRadius="16dp"
    android:topRightRadius="16dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp" />

3. Gradient background

<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#667EEA"
        android:endColor="#764BA2"
        android:angle="45" />
    <corners android:radius="12dp" />
</shape>

4. StateListDrawable (Thay đổi khi focus/pressed/error)

<!-- res/drawable/bg_edittext_states.xml -->
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Focused -->
    <item android:state_focused="true">
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke android:width="2dp" android:color="#2196F3" />
            <corners android:radius="12dp" />
        </shape>
    </item>
    <!-- Error -->
    <item android:state_error="true">
        <shape>
            <solid android:color="#FFF3F3" />
            <stroke android:width="2dp" android:color="#F44336" />
            <corners android:radius="12dp" />
        </shape>
    </item>
    <!-- Default -->
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke android:width="1dp" android:color="#CCCCCC" />
            <corners android:radius="12dp" />
        </shape>
    </item>
</selector>

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

Không cần custom drawable, Material Components đã hỗ trợ sẵn:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    app:boxCornerRadiusTopStart="12dp"
    app:boxCornerRadiusTopEnd="12dp"
    app:boxCornerRadiusBottomStart="12dp"
    app:boxCornerRadiusBottomEnd="12dp"
    app:boxStrokeColor="@color/primary"
    app:boxStrokeWidth="1.5dp"
    app:boxStrokeWidthFocused="2dp">

    <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ợ label floating, error text, character counter, prefix/suffix icon, animation mượt mà.

Lưu ý

• android:background trên EditText sẽ vô hiệu hóa hiệu ứng ripple/focus mặc định của Material.
• Nên dùng TextInputLayout cho các form chuẩn Material Design.
• Padding trong <shape> giúp text không dính vào viền.