Cách tạo Custom Dialog trong Android

Giới thiệu về Custom Dialog

Custom Dialog cho phép thiết kế giao diện tùy chỉnh hoàn toàn cho hộp thoại, thay vì dùng AlertDialog chuẩn. Sử dụng LayoutInflater để inflate layout XML tùy chỉnh.

Ví dụ minh họa

Bước 1: Tạo project

Android Studio → File → New Project.

Bước 2: Layout chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/customDialog"
        android:text="Custom Dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Bước 3: Layout Custom Dialog (res/layout/customview.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="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Success"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
        <Button
            android:id="@+id/buttonOk"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimary"
            android:text="Ok"
            android:textColor="#FFF" />
    </LinearLayout>
</LinearLayout>

Bước 4: Code (src/MainActivity.java)

package com.example.andy.myapplication;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends AppCompatActivity {

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.customDialog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                ViewGroup viewGroup = findViewById(android.R.id.content);
                
                // Inflate custom layout
                View dialogView = LayoutInflater.from(v.getContext())
                    .inflate(R.layout.customview, viewGroup, false);
                
                builder.setView(dialogView);
                
                AlertDialog alertDialog = builder.create();
                alertDialog.show();
                
                // Xử lý nút OK trong custom view
                Button buttonOk = dialogView.findViewById(R.id.buttonOk);
                buttonOk.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        alertDialog.dismiss();
                    }
                });
            }
        });
    }
}

Các loại Dialog phổ biến

DialogFragment - Cách hiện đại (Khuyến nghị)

public class MyDialogFragment extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        View view = LayoutInflater.from(getContext())
            .inflate(R.layout.customview, null);
        
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setView(view);
        
        view.findViewById(R.id.buttonOk).setOnClickListener(v -> dismiss());
        
        return builder.create();
    }
}

// Sử dụng
new MyDialogFragment().show(getSupportFragmentManager(), "tag");

Tùy chỉnh giao diện Dialog

1. Bo góc, background tùy chỉnh

// Trong styles.xml
<style name="CustomDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowBackground">@drawable/dialog_bg</item>
    <item name="android:windowMinWidthMajor">90%</item>
    <item name="android:windowMinWidthMinor">90%</item>
</style>

// drawable/dialog_bg.xml
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners android:radius="16dp" />
</shape>

// Áp dụng
AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.CustomDialog);

2. Full width dialog

alertDialog.show();
Window window = alertDialog.getWindow();
if (window != null) {
    window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, 
                     ViewGroup.LayoutParams.WRAP_CONTENT);
    window.setBackgroundDrawableResource(android.R.color.transparent);
}

Lưu ý quan trọng

• Luôn dismiss() dialog khi không cần (tránh leak)
• Dùng DialogFragment cho rotation handling tự động
• Custom view nên dùng ConstraintLayout cho responsive
• Theme Dialog phù hợp với Material Design
• Không làm việc nặng trong onCreateDialog