custom alertdialog (커스텀 다이얼로그) 구현

 

5. 커스텀 다이얼로그

 

dialog_page_eidt.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/dialog_background_round"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="오늘 몇 페이지까지 읽으셨나요?"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <EditText
        android:id="@+id/dialog_page_edit_et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="오늘까지 읽은 페이지"
        android:inputType="number"
        android:maxLength="5"
        android:textAlignment="center"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/dialog_page_end_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/ 200 페이지"
        android:layout_marginStart="8dp"
        app:layout_constraintVertical_bias="0.7"
        app:layout_constraintTop_toTopOf="@+id/dialog_page_edit_et"
        app:layout_constraintBottom_toBottomOf="@+id/dialog_page_edit_et"
        app:layout_constraintStart_toEndOf="@+id/dialog_page_edit_et"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/dialog_page_cancel_btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background_round_left"
        android:text="취소하기"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:layout_marginTop="50dp"
        app:layout_constraintTop_toBottomOf="@+id/dialog_page_end_tv"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/dialog_page_save_btn"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/dialog_page_save_btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background_round_right"
        android:text="저장하기"
        android:textColor="@color/white"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="@+id/dialog_page_cancel_btn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/dialog_page_cancel_btn"
        app:layout_constraintEnd_toEndOf="parent"/>
        
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

구현

            val dialogView = layoutInflater.inflate(R.layout.dialog_page_eidt, null)
            val alertDialog = AlertDialog.Builder(this)
                    .setView(dialogView)
                    .create()

            val userName = dialogView.findViewById<EditText>(R.id.username).text
            val password = dialogView.findViewById<EditText>(R.id.password).text
            val button = dialogView.findViewById<MaterialButton>(R.id.button)

            button.setOnClickListener {
                alertDialog.dismiss()
                Log.d("MyTag", "userName : $userName, password : $password")
            }

            alertDialog.show()

 

 

같은 기능 다른 코드

            AlertDialog.Builder(this)
                    .setView(R.layout.dialog_page_eidt)
                    .show()
                    .also { alertDialog ->

                        if(alertDialog == null) {
                            return@also
                        }

                        val userName = alertDialog.findViewById<EditText>(R.id.username)?.text
                        val password = alertDialog.findViewById<EditText>(R.id.password)?.text
                        val button = alertDialog.findViewById<MaterialButton>(R.id.button)

                        button?.setOnClickListener {
                            alertDialog.dismiss()
                            Log.d("MyTag", "userName : $userName, password : $password")
                        }
                    }

 

 

AlertDialog.java 클래스에서 show() 함수는 아래와 같기 때문에 create를 해주지 않아도 자동으로 생성

        public AlertDialog show() {
            final AlertDialog dialog = create();
            dialog.show();
            return dialog;
        }

 

 

 

 

테두리 둥글게 만들기

dialog_background_round.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 다이얼로그 배경 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">
    <item>
        <!-- 사각형 지정 -->
        <shape android:shape="rectangle">
            <!-- 각 모서리 dip 만큼 코너형식 -->
            <corners android:radius="18dip" />
            <!-- 배경색 -->
            <solid android:color="#fff" />
            <!-- 라인색 및 두께 -->
            <stroke android:width="0dp" android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

 

backgound에 적용

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/dialog_background_round"
    xmlns:app="http://schemas.android.com/apk/res-auto">

 

 

커스텀 다이얼로그 띄우는 메소드에 코드 작성

public void showDialog()
    {
        final Dialog dialog = new Dialog(context);
        // 아래 코드를 꼭 적어준다
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        .
        .
        .
    }

 

 

참고

https://greedy0110.tistory.com/70

Android Custom Dialog 만들기, Fullscreen Dialog 만들기, Transparent Dialog 만들기