วิธีตั้งค่า Dialog ให้แสดงเต็มหน้าจอใน Android ด้วย Kotlin

ตัวอย่างนี้สาธิตวิธีสร้าง Dialog แบบเต็มหน้าจอ (Fullscreen) โดยใช้ Theme Theme.Black.NoTitleBar.Fullscreen

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

Android Studio → New Project → Empty Activity

ขั้นตอนที่ 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnShowDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:onClick="showFullscreenDialog"
        android:text="Show Fullscreen Dialog" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World"
        android:textColor="@android:color/holo_purple"
        android:textSize="24sp"
        android:textStyle="bold|italic" />

</RelativeLayout>

ขั้นตอนที่ 3: Layout สำหรับ Dialog (res/layout/dialog_fullscreen.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="This is a Fullscreen Dialog!"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:textSize="28sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btnCloseDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:text="Close" />

</RelativeLayout>

ขั้นตอนที่ 4: โค้ดหลัก (MainActivity.kt)

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

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

    fun showFullscreenDialog(view: View) {
        // 🔑 ใช้ Theme Fullscreen
        val dialog = Dialog(this, android.R.style.Theme_Black_NoTitleBar_Fullscreen)

        // ตั้ง Layout ให้ Dialog
        dialog.setContentView(R.layout.dialog_fullscreen)

        // ปิด Dialog เมื่อกดปุ่ม Close
        dialog.findViewById(R.id.btnCloseDialog).setOnClickListener {
            dialog.dismiss()
        }

        dialog.show()
    }
}

🎨 Theme Options สำหรับ Dialog

🔧 วิธีทันสมัย: ใช้ BottomSheetDialogFragment

แนะนำให้ใช้ BottomSheetDialogFragment หรือ DialogFragment แทน Dialog ธรรมดา:

class FullscreenDialogFragment : DialogFragment() {
    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = Dialog(requireContext(), R.style.FullscreenDialogTheme)
        dialog.setContentView(R.layout.dialog_fullscreen)
        return dialog
    }
}

// res/values/styles.xml
<style name="FullscreenDialogTheme" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowBackground">@android:color/white</item>
</style>

ขั้นตอนที่ 5: AndroidManifest.xml

Manifest มาตรฐาน

ทดสอบ

1. รันแอป → กดปุ่ม "Show Fullscreen Dialog"
2. Dialog จะแสดงเต็มหน้าจอ สีดำ ไม่มี Title Bar
3. กด "Close" → Dialog ปิด