커스텀 다이얼로그 (custom Dialog)

오늘은 앱을 개발할때 자주 사용되는

커스텀 다이얼로그에 대해서 간단한 포스팅을 해보려 한다.

 

다이얼로그(dialog)는 사용자와의 상호작용을 위한 작은 팝업 창이다.

 

이러한 다이얼로그는 자체 내장기능으로도 간단히 구현할 수 있지만

 

오늘은 지정한 레이아웃으로 짜는 간단한 커스텀 다이얼로그로 진행을 해보겠다.

 

바로 예제를 보며 진행하도록 하자.

 

오늘의 예제는 메인 액티비티에 버튼을 눌렀을 때 커스텀 다이얼로그를 호출하고

버튼을 눌렀을 때에 대한 처리를 하는 간단한 다이얼로그로 진행을 해보겠다.

 

메인 액티비티 레이아웃

메인 액티비티

 

간단히 버튼을 만들고 그 버튼을 눌렀을 때 다이얼로그를 띄우는 코드다.

 

메인 액티비티

package com.example.customdialogexample

import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AlertDialog

class MainActivity : AppCompatActivity() {

    lateinit var button: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button = findViewById(R.id.button)

        button.setOnClickListener {

            setCustomDialog()

        }

    }

    private fun setCustomDialog() {

        val customDialog = AlertDialog.Builder(this)
            .setView(R.layout.custom_dialog)
            .setCancelable(true)
            .create()

        // 뒷배경을 투명으로 바꾼다.
        customDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        // dialog.show() 메서드를 먼저 호출해야함.
        // 그런 후에 customDialog 레이아웃 view를 초기화 해줘야함.
        customDialog.show()

        // customDialog 레이아웃에 view를 초기화 해준다.
        // 이과정이 번거로운 경우 viewBinding이나 DataBinding을 사용하면 간단히 할 수 있음
        val textViewCheck = customDialog.findViewById<TextView>(R.id.textViewCheck)
        val textViewCancel = customDialog.findViewById<TextView>(R.id.textViewCancel)

        textViewCheck!!.setOnClickListener {

            Toast.makeText(this,"확인을 눌렀습니다",Toast.LENGTH_SHORT).show()
            customDialog.dismiss()

        }

        textViewCancel!!.setOnClickListener {

            Toast.makeText(this,"취소를 눌렀습니다",Toast.LENGTH_SHORT).show()
            customDialog.dismiss()

        }


    }

}

 

 

 

커스텀 다이얼로그 레이아웃

<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_dialog_background"
    android:paddingVertical="20dp">

    <TextView
        android:id="@+id/textViewInformation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안내"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="@+id/textViewContent"
        app:layout_constraintStart_toStartOf="@id/textViewContent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textViewContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="40dp"
        android:text="이 다이얼로그는 테스트 다이얼로그 입니다."
        app:layout_constraintBottom_toTopOf="@id/textViewCancel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textViewInformation" />

    <TextView
        android:id="@+id/textViewCheck"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="10dp"
        android:text="확인"
        app:layout_constraintBottom_toBottomOf="@id/textViewCancel"
        app:layout_constraintEnd_toStartOf="@id/textViewCancel"
        app:layout_constraintTop_toTopOf="@id/textViewCancel" />

    <TextView
        android:id="@+id/textViewCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="취소"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/textViewContent"
        app:layout_constraintTop_toBottomOf="@id/textViewContent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

custom_dialog.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" />

    <stroke
        android:width="5dp"
        android:color="@color/white" />

    <corners android:radius="10dp" />

</shape>

 

 

코드를 실행한 결과를 보도록 하자.

 

 

실행 결과

실행 결과

 

 

위 화면과 같이 실행되는걸 볼 수 있다.

 

이러한 커스텀 다이얼로그를 이용하면 간단히 유저와 상호작용할 부분을

프래그먼트나 액티비티로 넘기는게 아닌 자연스럽게 처리할 수 있다.

 

 

오늘의 예제 깃허브 주소

 

GitHub - nam-su/CustomDialogExample