[안드로이드] 다이얼로그(Custom Dialog) 사용법 (알림창, 대화상자)

안녕하세요, 하원입니다.
이번에는 다이얼로그 사용법을 소개해보겠습니다.

---

필요한 파일

1. MyDialog.kt => custom dialog 틀
2. custom_dialog.xml => custom dialog layout 파일
3. dialog_rounding.xml => dialog를 둥글게 만들 drawable 파일
4. DialogTestActivity.kt => 다이얼로그를 테스트해 볼 Activity 파일

---

1. MyDialog.kt 코드

package com.example.velog

import android.app.Dialog
import android.content.Context
import android.view.WindowManager
import android.widget.TextView

class MyDialog(context : Context) {

    // dialog 변수 하나 만들어주기
    private val dialog = Dialog(context)

    // dialog에 적용할 layout, size, clickListener를 설정하는 함수
    fun MyDig()
    {
        // dialog에 적용할 layout 연결시키기
        dialog.setContentView(R.layout.custom_dialog)
        
        // dialog를 둥글게 만들기
        dialog.window?.setBackgroundDrawableResource(R.drawable.dialog_rounding)

        // dialog의 size를 설정하는 코드이다.
        dialog.window!!.setLayout(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT)
        
        // dialog 밖의 화면을 터치했을 때 dialog가 꺼지도록 하는 코드이다.
        dialog.setCanceledOnTouchOutside(true)
        dialog.setCancelable(true)

        // 확인/취소 버튼에 리스너를 달기 위한 과정
        val doneBtn = dialog.findViewById<TextView>(R.id.customDialog_doneBtn_btn)
        val cancelBtn = dialog.findViewById<TextView>(R.id.customDialog_cancelBtn_btn)


        // 확인 버튼 눌렀을 때
        doneBtn.setOnClickListener {
            onClickedListener.onDoneClicked()
            
            // dismiss()는 dialog를 끄게 해주는 코드이다.
            dialog.dismiss()
        }

        // 취소 버튼 눌렀을 때
        cancelBtn.setOnClickListener {
            onClickedListener.onCancelClicked()
            dialog.dismiss()
        }

        // 코드 마지막에 show()를 달아주어야 dialog가 정상적으로 실행된다.
        dialog.show()
    }

    // 버튼에 clickListener를 달아주기 위한 함수의 인터페이스 선언 
    // 함수 정의는 dialog를 사용할 액티비니나 프레그먼트에서 정의한다.
    interface clickListener{
        fun onDoneClicked()
        fun onCancelClicked()
    }

    private lateinit var onClickedListener : clickListener

    fun setOnClickedListener(listener : clickListener)
    {
        onClickedListener = listener
    }

}

위와 같이 MyDialog.kt 파일을 만들어서 필요할 때마다 MyDialog type의 변수를 만들어 사용해주면 된다. (실제로 사용하는 코드는 뒤쪽 4번에서!)

---

2. custom_dialog.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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#C1FFFA">

    <Button
        android:id="@+id/dialogTest_applyBtn_btn"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:text="신청 버튼"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/dialogTest_state_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="미신청"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialogTest_applyBtn_btn"/>

</androidx.constraintlayout.widget.ConstraintLayout>

layout 파일은 본인 스타일대로 만드시면 됩니다.

---

3. dialog_rounding.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:radius="15dp"/>
</shape>

dialog를 둥글게 만들기 위한 xml 파일입니다. drawable 폴더에 추가하시고 1번 코드에서 보신 것처럼 setBackgroundDrawableResource 메소드를 사용하셔서 연결하시면 됩니다.

---

4. DialogTestActivity.kt

package com.example.velog

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.velog.databinding.ActivityDialogTestBinding

class DialogTestActivity : AppCompatActivity() {

    // viewbinding을 위한 변수
    lateinit var binding : ActivityDialogTestBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // MyDialog type의 변수를 하나 만들어주기
        val applyBtn = MyDialog(this)
        
        binding = ActivityDialogTestBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 신청 버튼을 눌렀을 때
        binding.dialogTestApplyBtnBtn.setOnClickListener {
            // 위에서 만들어준 MyDialog type의 변수를 통해 MyDialog의 MyDig() 함수를 실행시켜준다.
            // 다이얼로그가 띄워지게 된다.
            applyBtn.MyDig()
        }

        // 신청 버튼 다이얼로그의 확인/취소 버튼에 리스너 달아주기
        applyBtn.setOnClickedListener(object : MyDialog.clickListener{
            // 다이얼로그의 확인 버튼을 눌렀을 때
            override fun onDoneClicked() {
                // 확인 버튼 눌렀을 때 실행시킬 코드 입력하기
                // 저는 신청 버튼 밑에 있는 "미신청" TextView를 "신청 완료"로 바꾸어보겠습니다.
                binding.dialogTestStateTv.text = "신청 완료"
            }

            // 다이얼로그의 취소 버튼을 눌렀을 때
            override fun onCancelClicked() {
                // 취소 버튼 눌렀을 때 실행시킬 코드 입력하기
            }

        })

    }
}

위에서 만든 1, 2, 3번 코드를 사용해본 Activity 코드입니다.
확인 버튼을 눌렀을 때 미신청 -> 신청 완료 로 바뀌도록 만들어봤습니다.

<실행 화면>

---

The End