วิธีสร้าง Custom Button ด้วย XML Styles/Drawable ใน Android

บทความนี้สาธิตวิธีสร้าง Custom Button ด้วย XML Drawable (Shape) ในโฟลเดอร์ res/drawable/ โดยไม่ต้องใช้รูปภาพ

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project

ขั้นตอนที่ 2: Layout (activity_main.xml)

วาง Button 3 ตัว ใช้ background ต่างกัน:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/customButton1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginBottom="24dp"
        android:background="@drawable/custom_button1"
        android:text="Custom Button 1"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/customButton2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/custom_button2"
        android:text="Custom Button 2"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/customButton3"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_above="@id/customButton1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:background="@drawable/custom_button3"
        android:text="Custom Button 3"
        android:textColor="@android:color/white" />

</RelativeLayout>

ขั้นตอนที่ 3: สร้าง Drawable Resources

คลิกขวา res/drawable → New → Drawable Resource File

1. ปุ่มขอบโค้งมน + เส้นขอบ (custom_button1.xml)

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

    <solid android:color="#4CAF50" /> <!-- สีพื้นหลัง -->
    <stroke
        android:width="2dp"
        android:color="#FFFFFF" /> <!-- เส้นขอบ -->
    <corners
        android:radius="16dp" /> <!-- มุมโค้งมน -->

</shape>

2. ปุ่ม Gradient (custom_button2.xml)

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

    <gradient
        android:startColor="#2196F3"
        android:centerColor="#00BCD4"
        android:endColor="#009688"
        android:angle="45" />

    <corners android:radius="50dp" /> <!-- วงกลม/แคปซูล -->

</shape>

3. ปุ่มวงกลม (custom_button3.xml)

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

    <solid android:color="#E91E63" />
    <corners android:radius="999dp" /> <!-- รัศมีใหญ่ = วงกลม -->

</shape>

ขั้นตอนที่ 4: MainActivity.java (ไม่ต้องเขียนโค้ดเพิ่ม)

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Shape Drawable Elements อธิบาย

State List Drawable (Selector) - สำหรับ State ต่างๆ

สร้าง res/drawable/button_selector.xml:

<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- Pressed state -->
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#1B5E20" />
            <corners android:radius="16dp" />
        </shape>
    </item>

    <!-- Focused state -->
    <item android:state_focused="true">
        <shape>
            <solid android:color="#2E7D32" />
            <corners android:radius="16dp" />
        </shape>
    </item>

    <!-- Disabled state -->
    <item android:state_enabled="false">
        <shape>
            <solid android:color="#A5D6A7" />
            <corners android:radius="16dp" />
        </shape>
    </item>

    <!-- Default state -->
    <item>
        <shape>
            <solid android:color="#4CAF50" />
            <corners android:radius="16dp" />
        </shape>
    </item>
</selector>

ใช้ใน Button: android:background="@drawable/button_selector"

MaterialButton (แนะนำสำหรับโปรเจกต์ใหม่)

implementation 'com.google.android.material:material:1.9.0'</pre>
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Material Button"
    app:backgroundTint="@color/colorPrimary"
    app:cornerRadius="16dp"
    app:strokeColor="@color/white"
    app:strokeWidth="2dp"
    app:icon="@drawable/ic_arrow"
    app:iconGravity="textStart" />