অ্যান্ড্রয়েডে কাস্টম AlertDialog ভিউ কীভাবে বাস্তবায়ন করবেন?

पूरी तरह কাস্টমাইজড AlertDialog তৈরি করা

এই টিউটোরিয়ালটি দেখায় কীভাবে কাস্টম XML লেআউট ব্যবহার করে সুন্দর এবং ফাংশনাল AlertDialog তৈরি করা যায়, স্ট্যান্ডার্ড ডায়ালগের সীমাবদ্ধতা অতিক্রম করে।

ধাপ ১: প্রজেক্ট তৈরি করুন

Android Studio-তে নতুন প্রজেক্ট।

ধাপ ২: মূল লেআউট (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <Button
        android:id="@+id/buttonShowDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@color/colorPrimary"
        android:padding="15dp"
        android:text="Android Custom Dialog Example"
        android:textAllCaps="false"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

ধাপ ৩: কাস্টম ডায়ালগ লেআউট (res/layout/my_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:background="@android:color/white">
    
    <!-- হেডার সেকশন -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/colorPrimary">
        
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_success"
            android:contentDescription="Success Icon" />
            
    </RelativeLayout>
    
    <!-- কন্টেন্ট -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="24dp"
        android:text="সাফল্য!"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.Material3.HeadlineMedium" />
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginHorizontal="24dp"
        android:text="লোরেম ইপসাম ডলর সিট আমেট, কনসেক্টেটুর অ্যাডিপিসিং এলিট। নাল্লা ইউ এরাত টিনসিডান্ট ল্যাকাস ফার্মেন্টাম রুট্রাম।"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.Material3.BodyMedium"
        android:textColor="#666666" />
    
    <!-- অ্যাকশন বাটন -->
    <Button
        android:id="@+id/buttonOk"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="24dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/button_background"
        android:text="ঠিক আছে"
        android:textColor="@color/colorPrimary"
        android:textAllCaps="false" />
        
</LinearLayout>

ধাপ ৪: বাটন ব্যাকগ্রাউন্ড (res/drawable/button_background.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <stroke android:width="2dp" android:color="@color/colorPrimary" />
            <solid android:color="@android:color/transparent" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

ধাপ ৫: ভেক্টর আইকন (res/drawable/ic_success.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41 3.59,3.59 7.59,-7.59 1.41,1.41-9,9z"/>
</vector>

ধাপ ৬: MainActivity.java

package com.app.sample;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        findViewById(R.id.buttonShowDialog).setOnClickListener(v -> showCustomDialog());
    }

    private void showCustomDialog() {
        // লেআউট ইনফ্লেট করুন
        ViewGroup viewGroup = findViewById(android.R.id.content);
        View dialogView = LayoutInflater.from(this).inflate(R.layout.my_dialog, viewGroup, false);
        
        // AlertDialog.Builder দিয়ে তৈরি করুন
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setView(dialogView);
        
        AlertDialog alertDialog = builder.create();
        
        // ডায়ালগের কনার রেডিয়াস (ঐচ্ছিক)
        if (alertDialog.getWindow() != null) {
            alertDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        }
        
        alertDialog.show();
        
        // বাটন ক্লিক হ্যান্ডলিং
        Button btnOk = dialogView.findViewById(R.id.buttonOk);
        btnOk.setOnClickListener(v -> alertDialog.dismiss());
    }
}

ধাপ ৭: ম্যানিফেস্ট

সাধারণ কনফিগারেশন।

উন্নত ফিচারস যোগ করা

১. ইনপুট ফিল্ড সহ ডায়ালগ

// res/layout/dialog_input.xml
<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">
    
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.Material3.TextInputLayout.OutlinedBox">
        
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="আপনার নাম লিখুন" />
            
    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

// জাভাতে
View inputView = LayoutInflater.from(this).inflate(R.layout.dialog_input, null);
EditText etInput = inputView.findViewById(R.id.etInput);

new AlertDialog.Builder(this)
    .setTitle("নাম লিখুন")
    .setView(inputView)
    .setPositiveButton("সেভ", (dialog, which) -> {
        String name = etInput.getText().toString();
        // প্রসেস করুন
    })
    .setNegativeButton("বাতিল", null)
    .show();

২. লিস্ট/রেডিও বাটন ডায়ালগ

String[] options = {"বিকল্প ১", "বিকল্প ২", "বিকল্প ৩"};

new AlertDialog.Builder(this)
    .setTitle("একটি বেছে নিন")
    .setSingleChoiceItems(options, -1, (dialog, which) -> {
        // which = সিলেক্টেড ইনডেক্স
        dialog.dismiss();
    })
    .show();

৩. MaterialAlertDialogBuilder (Material 3 - সুপারিশড)

import com.google.android.material.dialog.MaterialAlertDialogBuilder;

new MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_Material3_MaterialAlertDialog)
    .setTitle("ম্যাটেরিয়াল ডায়ালগ")
    .setMessage("এটি Material 3 স্টাইল ডায়ালগ")
    .setPositiveButton("হ্যাঁ", (dialog, which) -> {})
    .setNegativeButton("না", (dialog, which) -> {})
    .setNeutralButton("বाद দিন", (dialog, which) -> {})
    .show();

৪. DialogFragment (জীবনচক্র সুরক্ষিত)

public class CustomDialogFragment extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        View view = LayoutInflater.from(requireContext()).inflate(R.layout.my_dialog, null);
        
        AlertDialog.Builder builder = new AlertDialog.Builder(requireActivity());
        builder.setView(view);
        
        AlertDialog dialog = builder.create();
        if (dialog.getWindow() != null) {
            dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        }
        
        view.findViewById(R.id.buttonOk).setOnClickListener(v -> dismiss());
        
        return dialog;
    }
}

// ব্যবহার
new CustomDialogFragment().show(getSupportFragmentManager(), "customDialog");

৫. কোটলিন এক্সটেনশন ফাংশন

fun Activity.showCustomDialog(
    @LayoutRes layoutRes: Int,
    title: String? = null,
    onBind: (View) -> Unit,
    onPositive: (() -> Unit)? = null
) {
    val view = layoutInflater.inflate(layoutRes, null)
    onBind(view)
    
    MaterialAlertDialogBuilder(this)
        .setTitle(title)
        .setView(view)
        .setPositiveButton("ঠিক আছে") { _, _ -> onPositive?.invoke() }
        .setNegativeButton("বাতিল") { _, _ -> }
        .show()
}

// কল
showCustomDialog(R.layout.my_dialog, "शीर्षক") { view ->
    view.findViewById(R.id.textView).text = "কাস্টম মেসেজ"
} {
    // পজিটিভ বাটন ক্লিক
}