Cách tạo EditText bo góc (rounded corners) trên Android

Giới thiệu

Tạo EditText bo góc bằng cách dùng Shape Drawable (XML) làm background. Cách này nhẹ, không cần thư viện thứ 3, và tương thích mọi phiên bản Android.

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

Bước 1: Tạo dự án mới

Android Studio → File → New Project → Empty View Activity.

Bước 2: Tạo drawable background bo góc (res/drawable/edittext_rounded.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- Màu nền -->
    <solid android:color="#FFFFFF" />

    <!-- Viền -->
    <stroke
        android:width="2dp"
        android:color="#0274BE" />

    <!-- Bo góc -->
    <corners android:radius="12dp" />

    <!-- Padding nội bộ (tùy chọn) -->
    <padding
        android:left="12dp"
        android:top="12dp"
        android:right="12dp"
        android:bottom="12dp" />
</shape>

Biến thể: Bo góc từng cạnh riêng biệt

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

Bước 3: Thiết kế 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:padding="24dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/etName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/edittext_rounded"
        android:hint="Nhập tên của bạn"
        android:inputType="textPersonName"
        android:padding="16dp"
        android:textSize="16sp" />

    <EditText
        android:id="@+id/etEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_rounded"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:padding="16dp"
        android:textSize="16sp" />

    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:background="@drawable/edittext_rounded"
        android:text="Xác nhận"
        android:textColor="#FFFFFF"
        android:textSize="16sp" />
</LinearLayout>

Bước 4: Thêm trạng thái focus/pressed (res/drawable/edittext_rounded_state.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Trạng thái focused -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <stroke android:width="2dp" android:color="#1976D2" />
            <corners android:radius="12dp" />
        </shape>
    </item>

    <!-- Trạng thái pressed -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#E3F2FD" />
            <stroke android:width="2dp" android:color="#1565C0" />
            <corners android:radius="12dp" />
        </shape>
    </item>

    <!-- Trạng thái disabled -->
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <solid android:color="#F5F5F5" />
            <stroke android:width="1dp" android:color="#BDBDBD" />
            <corners android:radius="12dp" />
        </shape>
    </item>

    <!-- Trạng thái mặc định -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <stroke android:width="2dp" android:color="#0274BE" />
            <corners android:radius="12dp" />
        </shape>
    </item>
</selector>

Sau đó gán android:background="@drawable/edittext_rounded_state" cho EditText.

Bước 5: Code Activity (MainActivity.kt)

package com.example.edittextrounded

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.edittextrounded.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.btnSubmit.setOnClickListener {
            val name = binding.etName.text.toString()
            val email = binding.etEmail.text.toString()
            // Xử lý logic...
        }
    }
}

Cách hiện đại: Material Design 3 TextInputLayout

Khuyến nghị dùng Material Components - hỗ trợ sẵn bo góc, label floating, error, helper text, character counter.

Dependency:

implementation("com.google.android.material:material:1.12.0")

Layout:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Tên đăng nhập"
    app:boxCornerRadiusTopStart="16dp"
    app:boxCornerRadiusTopEnd="16dp"
    app:boxCornerRadiusBottomStart="16dp"
    app:boxCornerRadiusBottomEnd="16dp"
    app:boxStrokeWidth="2dp"
    app:boxStrokeColor="@color/primary">

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

So sánh

Lưu ý

• Trên Android 9+ (API 28+), background drawable có thể bị che bởi default background của theme → dùng android:background="@null" trên EditText nếu dùng TextInputLayout.
• Nên dùng dp cho radius, stroke width để scale đúng trên mọi màn hình.
• Kết hợp với android:imeOptions="actionNext|actionDone" để cải thiện UX bàn phím.