Android में कस्टम AlertDialog View कैसे इम्प्लीमेंट करें?

Android में कस्टम AlertDialog इम्प्लीमेंट करना

यह ट्यूटोरियल दिखाता है कि कैसे कस्टम लेआउट के साथ AlertDialog बनाया जाता है, जिसमें कस्टम टाइटल, आइकन, मैसेज, और बटन स्टाइलिंग शामिल है।

चरण 1: प्रोजेक्ट बनाएं

Android Studio में नया प्रोजेक्ट बनाएं।

चरण 2: मेन लेआउट में बटन

res/layout/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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/buttonShowDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:backgroundTint="@color/colorPrimary"
        android:padding="15dp"
        android:text="कस्टम डायलॉग दिखाएं"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

चरण 3: कस्टम डायलॉग लेआउट

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:padding="16dp">
    
    <!-- हेडर सेक्शन -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/colorPrimary"
        android:gravity="center">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/ic_success"
            android:contentDescription="सफलता" />
    </RelativeLayout>
    
    <!-- टाइटल -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="सफलता!"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6" />
    
    <!-- मैसेज -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body1" />
    
    <!-- एक्शन बटन -->
    <Button
        android:id="@+id/buttonOk"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="16dp"
        android:background="@drawable/button_background"
        android:text="ठीक है"
        android:textColor="@color/colorPrimary" />
</LinearLayout>

चरण 4: बटन बैकग्राउंड ड्रॉएबल

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/colorPrimaryDark" />
            <stroke android:width="2dp" 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>

चरण 5: वेक्टर आइकन (ic_success.xml)

res/drawable/ic_success.xml - VectorDrawable चेकमार्क आइकन के लिए।

चरण 6: MainActivity में डायलॉग दिखाएं

src/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 बिल्डर
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setView(dialogView);
        builder.setCancelable(true); // बैक प्रेस से बंद होने दें
        
        AlertDialog alertDialog = builder.create();
        
        // डायलॉग दिखने के बाद विंडो फीचर्स सेट करें
        alertDialog.show();
        
        // वैकल्पिक: डायलॉग विंडो कस्टमाइजेशन
        if (alertDialog.getWindow() != null) {
            alertDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
            // alertDialog.getWindow().setLayout(800, ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        
        // बटन क्लिक हैंडलर
        Button btnOk = dialogView.findViewById(R.id.buttonOk);
        btnOk.setOnClickListener(v -> alertDialog.dismiss());
    }
}

एडवांस्ड: 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(requireContext());
        builder.setView(view);
        
        AlertDialog dialog = builder.create();
        
        view.findViewById(R.id.buttonOk).setOnClickListener(v -> dismiss());
        
        return dialog;
    }
    
    @Override
    public void onStart() {
        super.onStart();
        if (getDialog() != null && getDialog().getWindow() != null) {
            getDialog().getWindow().setLayout(
                ViewGroup.LayoutParams.MATCH_PARENT, 
                ViewGroup.LayoutParams.WRAP_CONTENT);
            getDialog().getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        }
    }
}

// उपयोग:
new CustomDialogFragment().show(getSupportFragmentManager(), "CustomDialog");

बॉटम शीट डायलॉग (मटेरियल डिज़ाइन)

// BottomSheetDialogFragment उपयोग करें
public class CustomBottomSheetDialog extends BottomSheetDialogFragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.my_dialog, container, false);
        view.findViewById(R.id.buttonOk).setOnClickListener(v -> dismiss());
        return view;
    }
}

// या BottomSheetDialog सीधे
BottomSheetDialog dialog = new BottomSheetDialog(this);
dialog.setContentView(R.layout.my_dialog);
dialog.show();

कस्टम डायलॉग के लिए बेस्ट प्रैक्टिसेज

• DialogFragment उपयोग करें - कॉन्फिगरेशन चेंज (रोटेशन) पर क्रैश नहीं होता
• wrap_content ऊंचाई उपयोग करें - डायलॉग कंटेंट के अनुसार एडजस्ट हो
• पारदर्शी विंडो बैकग्राउंड सेट करें राउंडेड कॉर्नर्स के लिए
• एक्सेसिबिलिटी: फोकस ट्रैपिंग, स्क्रीन रीडर लेबल्स सुनिश्चित करें
• थीम एट्रिब्यूट्स उपयोग करें हार्डकोडेड रंगों के बजाय
• कीबोर्ड हैंडलिंग: setSoftInputMode() सेट करें अगर इनपुट फील्ड हैं

चरण 7: मैनिफेस्ट

स्टैंडर्ड कॉन्फ़िगरेशन।

AlertDialog vs DialogFragment vs BottomSheetDialog