Android/Java แสดงไดอะล็อกปรับแต่งเอง Custom dialog

แสดงไดอะล็อกด้วย AlertDialog.setView

แสดงไดอะล็อกโดยนำ layout_login.xml มาแสดง
โดย button1 แสดงเฉยๆ แต่รับค่ากลับมาใช้ไม่ได้
แต่ button2 แสดงและรับค่ากลับมาใช้ได้

แสดงด้วย setView

ไฟล์ที่เกี่ยวข้อง

  • activity_main.xml
  • MainActivity.java
  • layout_login.xml

สร้าง Layout XML File โดยไปที่ New > XML > Layout XML File แล้วตั้งชื่อ layout_login.xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dialog Single Choice 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dialog Single Choice 2" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.phaisarn.myapplication;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        Button button1 = findViewById(R.id.button1);
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                LayoutInflater inflater = getLayoutInflater();
                new AlertDialog.Builder(MainActivity.this)
                        .setTitle("Custom dialog")
                        .setView(inflater.inflate(R.layout.layout_login, null))
                        .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                Toast.makeText(MainActivity.this, "OK", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });

        Button button2 = findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                LayoutInflater inflater = getLayoutInflater();
                final AlertDialog builder = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("Custom dialog")
                        .setView(inflater.inflate(R.layout.layout_login, null))
                        .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {

                            }
                        })
                        .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {

                            }
                        })
                        .create();

                builder.setOnShowListener(new DialogInterface.OnShowListener() {
                    @Override
                    public void onShow(DialogInterface dialog) {
                        Button button = builder.getButton(builder.BUTTON_POSITIVE);
                        button.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                EditText editText = builder.findViewById(R.id.username);
                                String str = editText.getText().toString();
                                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
                                builder.dismiss();
                            }
                        });
                    }
                });
                builder.show();
            }
        });
    }
}

button1

บรรทัดที่ 25,43: สร้างตัวแปร inflater ไว้ใข้ในการเข้าถึง layout
บรรทัดที่ 28,46: ให้ไดอะล็อก setView ไปที่ layout_login.xml
บรรทัดที่ 29: กำหนดปุ่ม setPositiveButton()

button2

สร้างไดอะล็อกก่อนด้วยเมธอด create() ในบรรทัดที่ 59
จากนั้นค่อยแสดงไดอะล็อกด้วยเมธอด show() ในบรรทัดที่ 76
การสร้างไดอะล็อกก่อน ค่อยแสดงไดอะล็อก จะทำให้สามารถอ่านค่าจาก layout_login ที่อยู่ภายในไดอะล็อกได้

บรรทัดที่ 43: สร้างตัวแปร inflater ไว้ใข้ในการเข้าถึง layout
บรรทัดที่ 46: ให้ไดอะล็อก setView ไปที่ layout_login.xml
บรรทัดที่ 47: กำหนดปุ่ม setPositiveButton() แต่ภายในเมธอดนี้ไม่ต้องเขียนโค๊ด (แต่ต้องสร้างเมธอดนี้ไว้)
บรรทัดที่ 53: กำหนดปุ่ม setNegativeButton() แต่ภายในเมธอดนี้ไม่ต้องเขียนโค๊ด (แต่ต้องสร้างเมธอดนี้ไว้)
บรรทัดที่ 59: สร้างไดอะล็อกด้วยเมธฮด create()

บรรทัดที่ 61: เรียกเมธอด setOnShowListener()
บรรทัดที่ 63: เรียกเมธอด onShow()
บรรทัดที่ 67: เรียกเมธอด onClick() เพื่อใส่การทำงานจริงๆเมื่อคลิกปุ่มที่นี่
บรรทัดที่ 71: ปิดไดอะล็อกด้วยเมธอด dismiss()

layout_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"
        android:textAlignment="center" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textAlignment="center" />

</LinearLayout>