วิธีสร้าง Custom Alert Dialog ใน Android ด้วย Kotlin

บทนำ

ตัวอย่างนี้สาธิตการสร้าง Custom Alert Dialog โดยใช้ Layout XML แบบกำหนดเอง แทน Dialog มาตรฐาน

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

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

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

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/buttonShowCustomDialog"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="86dp"
        android:gravity="center"
        android:text="CLICK TO VIEW CUSTOM ALERT DIALOG"
        android:textSize="18sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/buttonShowCustomDialog"
        style="@android:style/Widget.DeviceDefault.Button.Inset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="131dp"
        android:text="Show Dialog"
        android:textStyle="bold" />
</RelativeLayout>

ขั้นตอนที่ 3: Layout Custom Dialog (res/layout/custom_dialog.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="wrap_content"
    android:orientation="vertical"
    android:padding="24dp"
    android:background="@android:color/white">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Custom Alert Dialog"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="@android:color/black" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="This is a custom dialog with your own layout design."
        android:textSize="16sp"
        android:textColor="@android:color/darker_gray" />

    <Button
        android:id="@+id/dialogButtonOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="24dp"
        android:text="OK"
        android:textStyle="bold" />
</LinearLayout>

ขั้นตอนที่ 4: MainActivity.kt

import android.app.Dialog
import android.content.Context
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private val context: Context = this

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Custom Dialog Demo"
    }

    fun showCustomDialog(view: View) {
        val dialog = Dialog(context)
        dialog.setContentView(R.layout.custom_dialog)
        
        // ปิดการทำงานเมื่อคลิกนอกพื้นที่ (optional)
        dialog.setCanceledOnTouchOutside(true)
        
        val dialogButton = dialog.findViewById(R.id.dialogButtonOK)
        dialogButton.setOnClickListener {
            dialog.dismiss()
            Toast.makeText(applicationContext, "Dialog Dismissed!", Toast.LENGTH_SHORT).show()
        }
        
        dialog.show()
    }
}

ขั้นตอนที่ 5: Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.customdialog">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

แนวทางทันสมัย: MaterialAlertDialogBuilder

แนะนำให้ใช้ MaterialAlertDialogBuilder จาก Material Components:

dependencies {
    implementation 'com.google.android.material:material:1.11.0'
}

// ใช้งาน
MaterialAlertDialogBuilder(this)
    .setTitle("Custom Dialog")
    .setMessage("Content message")
    .setView(R.layout.custom_dialog) // หรือ setView(view)
    .setPositiveButton("OK") { dialog, _ -> dialog.dismiss() }
    .setNegativeButton("Cancel") { dialog, _ -> dialog.dismiss() }
    .show()

DialogFragment (แนะนำสำหรับ Dialog 複雜)

class CustomDialogFragment : DialogFragment() {
    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return MaterialAlertDialogBuilder(requireContext())
            .setView(R.layout.custom_dialog)
            .create()
    }
}

// เรียกใช้
CustomDialogFragment().show(supportFragmentManager, "CustomDialog")

ประโยชน์ของ DialogFragment

• จัดการ Lifecycle อัตโนมัติ (Rotation, Background)
• รองรับ Back Stack
• สามารถสื่อสารกับ Fragment/Activity ได้ผ่าน Interface