Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Cách hiển thị Dialog toàn màn hình (Fullscreen) trên Android

Giới thiệu

Bài viết này hướng dẫn cách tạo và hiển thị một Dialog chiếm toàn bộ màn hình (fullscreen) trên Android bằng cách sử dụng theme Theme_Black_NoTitleBar_Fullscreen.

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

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

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện chính (res/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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:onClick="ClickHere"
        android:text="Hiển thị Dialog Fullscreen" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World" />

</RelativeLayout>

Bước 3: Viết code hiển thị Dialog (src/MainActivity.java)

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void ClickHere(View view) {
        // Tạo dialog với theme fullscreen không title bar
        Dialog dialog = new Dialog(this, android.R.style.Theme_Black_NoTitleBar_Fullscreen);
        
        // Set layout cho dialog (ở đây dùng lại layout chính cho demo)
        dialog.setContentView(R.layout.activity_main);
        
        // Hiển thị dialog
        dialog.show();
    }
}

Bước 4: Cấu hình Manifest (androidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <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>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run, chọn thiết bị. Nhấn nút "Hiển thị Dialog Fullscreen" để xem kết quả.

Các theme fullscreen phổ biến

Theme Đặc điểm
android.R.style.Theme_Black_NoTitleBar_Fullscreen Nền đen, không title bar, fullscreen (dùng trong ví dụ)
android.R.style.Theme_Holo_NoTitleBar_Fullscreen Holo theme, không title bar, fullscreen (API 11+)
android.R.style.Theme_Material_NoActionBar_Fullscreen Material theme, không action bar, fullscreen (API 21+)
android.R.style.Theme_Translucent_NoTitleBar_Fullscreen Trong suốt, không title bar, fullscreen

Cách hiện đại hơn: BottomSheetDialogFragment / DialogFragment

Từ Android 9 (API 28), Dialog cơ bản vẫn hoạt động nhưng Google khuyến khích dùng DialogFragment hoặc BottomSheetDialogFragment để quản lý vòng đời tốt hơn, đặc biệt khi xoay màn hình hoặc configuration change.

// Ví dụ với DialogFragment fullscreen
public class FullscreenDialogFragment extends DialogFragment {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NORMAL, R.style.FullscreenDialogTheme);
    }
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.dialog_fullscreen, container, false);
    }
}

// styles.xml
<style name="FullscreenDialogTheme" parent="Theme.AppCompat.Light.DialogWhenLarge">
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowNoTitle">true</item>
</style>

Lưu ý

  • Ví dụ trên dùng lại layout activity_main cho dialog, thực tế nên tạo layout riêng cho dialog.
  • Dialog fullscreen phù hợp cho: hình ảnh toàn màn hình, form nhập liệu phức tạp, preview nội dung.
  • Để đóng dialog: dialog.dismiss() hoặc nhấn back (mặc định).