วิธีสร้าง EditText มุมโค้ง (Rounded/Circular EditText) ใน Android

ภาพรวม

บทความนี้สาธิตการสร้าง EditText ที่มีมุมโค้งมน (Rounded Corners) โดยใช้ Shape Drawable XML

ขั้นตอนที่ 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="15dp"
        android:paddingEnd="15dp"
        android:paddingTop="12dp"
        android:paddingBottom="12dp"
        android:background="@drawable/rounded_edittext"
        android:hint="ป้อนข้อความ..." />

</LinearLayout>

ขั้นตอนที่ 3: Shape Drawable (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="2dp"
        android:color="#2196F3" />
    <corners
        android:radius="25dp" />
    <!-- สำหรับมุมโค้งเฉพาะมุมบางมุม:
    <corners
        android:topLeftRadius="25dp"
        android:topRightRadius="25dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp" />
    -->
</shape>

คำอธิบายแอตทริบิวต์

State List Drawable (มีสถานะ Focus/Pressed/Error)

res/drawable/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="#1976D2" />
            <corners android:radius="25dp" />
        </shape>
    </item>

    <!-- Error -->
    <item android:state_error="true">
        <shape>
            <solid android:color="#FFF3F3" />
            <stroke android:width="2dp" android:color="#F44336" />
            <corners android:radius="25dp" />
        </shape>
    </item>

    <!-- Normal -->
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke android:width="1dp" android:color="#BDBDBD" />
            <corners android:radius="25dp" />
        </shape>
    </item>
</selector>

ใช้กับ TextInputLayout (Material Design - แนะนำ)

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="อีเมล"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

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

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

TextInputLayout จัดการ rounded corners, label animation, error state, helper text ให้อัตโนมัติ

ทดสอบ

รันแอป จะเห็น EditText สีขาว ขอบสีน้ำเงิน มุมโค้งมน 25dp ทุกมุม