Android Custom Dialog 만들기 - Dialog Fragment

안드로이드 Dialog Fragment를 이용하여, 커스텀 다이얼로그를 만드는 방법에 대해 알아보겠습니다.

본 포스팅은 ViewBinding을 사용합니다.

https://chjune0205.tistory.com/entry/Android-ViewBinding%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

Android ViewBinding에 대하여

완성 화면은 다음과 같습니다.

네 누르면 앱 종료 되고, 아니요 누르면 다이얼로그만 사라집니다

⛏ 레이아웃 만들기

다이얼로그 레이아웃 파일을 새로 만들어줍니다.

저는 dialog_layout.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:background="@drawable/round_background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#333333"
        app:layout_constraintBottom_toTopOf="@+id/btn_no" />
    <TextView
        android:id="@+id/btn_yes"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="네"
        android:gravity="center"
        android:textSize="16dp"
        android:paddingVertical="16dp"
        android:textColor="#ffffff"
        android:background="@drawable/round_background_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_no" />

    <TextView
        android:id="@+id/btn_no"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingVertical="16dp"
        android:text="아니요"
        android:textColor="#000000"
        android:textSize="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_yes"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:layout_marginBottom="64dp"
        android:textColor="#333333"
        android:text="앱을 종료하시겠습니까?"
        app:layout_constraintBottom_toTopOf="@+id/view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

위 코드의 round_background.xml은 drawable폴더에 만들어줍니다.

배경을 둥글게 하기 위한 코드입니다.

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

round_background_gray.xml도 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#5e5e5e"/>
    <corners android:bottomRightRadius="16dp"/>
</shape>

🚀 다이얼로그에 기능 넣기

CustomDialog.kt 내용입니다.

class CustomDialog(val finishApp: () -> Unit): DialogFragment() {
    private var _binding: DialogLayoutBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = DialogLayoutBinding.inflate(inflater, container, false)
        val view = binding.root
        dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
        binding.btnYes.setOnClickListener {
            finishApp()
        }
        binding.btnNo.setOnClickListener {
            dismiss()
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

생성자의 인자로, 앱을 종료시키는 함수를 전달받습니다.

이 함수는 다이얼로그의 Yes버튼을 누르면 호출됩니다.

 

✔ 다이얼로그 사용하기

private fun showMessageDialog(){
  val customDialog = CustomDialog(finishApp = {finish()})
  customDialog.show(supportFragmentManager, "CustomDialog")
}

완성 화면