[Android/Kotlin] Custom Dialog (팝업)

이렇게 내가 원하는 형태로 다이얼로그를 변경하고 싶으면 custom dialog를 사용하면 된다.

 

 

1. 원하는 Dialog (팝업) xml을 layout에서 만든다.

fragment_dialog_letter.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"
    android:background="@android:color/transparent">

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/img_dialog" />

    <ImageView
        android:id="@+id/okBtn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="27dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView8"
        app:layout_constraintStart_toStartOf="@+id/imageView8"
        app:layout_constraintTop_toBottomOf="@+id/contentTv"
        app:srcCompat="@drawable/img_ok_button3" />

    <TextView
        android:id="@+id/titleTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="TextView"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="@+id/imageView8"
        app:layout_constraintStart_toStartOf="@+id/imageView8"
        app:layout_constraintTop_toTopOf="@+id/imageView8" />

    <TextView
        android:id="@+id/contentTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="14dp"
        android:text="TextView"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="@+id/imageView8"
        app:layout_constraintStart_toStartOf="@+id/imageView8"
        app:layout_constraintTop_toBottomOf="@+id/titleTv" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

2. 클릭 시 보여질 Dialog (팝업) fragment를 만든다.

DialogLetterFragment.kt

import android.app.Dialog
import android.content.Context
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.view.LayoutInflater
import android.view.Window
import com.umc.anddeul.databinding.FragmentDialogLetterBinding

class DialogLetterFragment(private val context: Context) {
    private lateinit var binding: FragmentDialogLetterBinding	// 뷰바인딩
    private val dlg = Dialog(context)

    fun show(){	
        binding = FragmentDialogLetterBinding.inflate(LayoutInflater.from(context))

        // 기본 설정
        dlg.requestWindowFeature(Window.FEATURE_NO_TITLE)	// 제목 없음
        dlg.setContentView(binding.root)	// 해당 뷰 바인딩을 적용
        dlg.setCancelable(true)	// 취소 허용
        dlg.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))	// 배경 없애기

        dlg.setCanceledOnTouchOutside(true)	// 밖에 클릭해도 dialog 사라짐

		// 원하는 텍스트 적용
        binding.titleTv.text = "이미 편지를 적은 경우\n녹음할 수 없습니다."
        binding.contentTv.text = "녹음 편지를 작성하고 싶으시다면,\n내용을 지워주세요"

        // 확인 버튼
        binding.okBtn3.setOnClickListener {
            dlg.dismiss()	// 클릭 시 dialog 사라짐
        }

        dlg.show()	// dialog 보이게 함
    }
}

 

 

 

3. 기존 fragment에 dialog 보일 코드 추가

MyFragment.kt

val dialogFragment = DialogLetterFragment(requireContext())
dialogFragment.show()

 

 

 

4. 변수도 전달하고 싶을 경우

DialogLetterFragment.kt

fun show(name: String){
	//// (생략)
}

 

MyFragment.kt

val dialogFragment = DialogLetterFragment(requireContext())
dialogFragment.show("Anna")