Tạo custom dialog với xử lý sự kiện view tùy chỉnh trên Android

Custom Dialog với xử lý sự kiện view riêng

Ví dụ này minh họa cách tạo custom dialog và xử lý sự kiện click trên các view bên trong dialog (như nút OK) trên Android.

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

Khởi tạo dự án Android Studio mới.

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/customDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom Dialog" />

</LinearLayout>

Bước 3: MainActivity.java - Xử lý sự kiện dialog

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;
import android.widget.Button;

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) {
                // Tạo AlertDialog.Builder mặc định (không dùng theme tùy chỉnh)
                final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                ViewGroup viewGroup = findViewById(android.R.id.content);
                View dialogView = LayoutInflater.from(v.getContext()).inflate(R.layout.customview, viewGroup, false);
                
                Button buttonOk = dialogView.findViewById(R.id.buttonOk);
                builder.setView(dialogView);
                
                final AlertDialog alertDialog = builder.create();
                
                // Xử lý sự kiện click nút OK bên trong dialog
                buttonOk.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        alertDialog.dismiss(); // Đóng dialog
                    }
                });
                
                alertDialog.show();
            }
        });
    }
}

Bước 4: Layout custom view (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>

Sự khác biệt với bài trước

Khác với ví dụ có góc bo tròn (sử dụng R.style.CustomAlertDialog), ví dụ này dùng AlertDialog.Builder mặc định. Ưu điểm là đơn giản hơn, không cần tạo style và drawable riêng.

Chạy ứng dụng

Màn hình chính hiển thị nút "Custom Dialog". Click để mở dialog tùy chỉnh với tiêu đề "Success", nội dung văn bản và nút "Ok". Nhấn "Ok" sẽ đóng dialog và quay lại màn hình chính.