Fullscreen으로 동작하는 Custom Dialog 만들기

 

개요

Fullscreen으로 동작하는 Dialog를 만드는 방법으로는 크게 두 가지가 있다.

 

1. Dialog처럼 보이는 Activity를 만들어 띄우기
2. Dialog를 Customizing하여 Fullscreen으로 띄우기

 

둘 중 어떤 것이 베스트라고 할 수는 없지만, 기왕이면 ‘다이얼로그’라는 이름답게 2번 방식을 따라 보기로 했다.

최초 작성 코드 언어는 java였으나 kotlin으로 변경하였고, findViewById 대신 ViewBinding 을 적용하였다.

 

완성본 미리 보기

SHOW DIALOG 버튼 클릭 시 Fullscreen으로 동작하는 Dialog가 출력되고, SUBMIT/CANCEL 버튼 클릭 이벤트와 동시에 Toast가 출력되는 예제 앱이다.

 

 

코드 작성

MyCustomDialog 라는 이름의 Project를 empty activity로 생성하고, build.gradle 에 viewBinding 사용 선언을 우선 해 주어야 한다.

android {
    ...
    viewBinding {
    	enabled = true
	}
}

app 수준의 build.gradle 에 위 코드를 추가하고 sync 버튼을 눌러 준다.

 

 

레이아웃 작업하기

activity_main.xml 파일 정 가운데에 SHOW_DIALOG 버튼을 생성한다.

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/showDialogButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SHOW DIALOG"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

dialog_full_activity.xml 파일을 res/layout 에 생성한 다음 아래 코드를 넣어 준다.

 

<?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="#E6003049">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="21dp"
            android:lineSpacingExtra="4sp"
            android:textColor="#ee6c4d"
            android:textSize="16.5sp"
            app:layout_constraintBottom_toTopOf="@id/messageTextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:text="@string/default_dialog_title" />

        <TextView
            android:id="@+id/messageTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="4sp"
            android:textColor="#FFFFFF"
            android:textSize="22.5sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="@string/default_dialog_message" />

        <Button
            android:id="@+id/submitButton"
            android:layout_width="138dp"
            android:layout_height="0dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="3.75dp"
            android:backgroundTint="#012a4a"
            android:letterSpacing="-0.05"
            android:lineSpacingExtra="1.3sp"
            android:text="@string/default_dialog_submit_caption"
            android:textColor="#ffffff"
            android:textSize="13.5sp"
            app:layout_constraintEnd_toStartOf="@id/cancelButton"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/messageTextView"
            app:layout_constraintVertical_chainStyle="packed" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="138dp"
            android:layout_height="0dp"
            android:layout_marginStart="3.75dp"
            android:layout_marginTop="30dp"
            android:backgroundTint="#012a4a"
            android:letterSpacing="-0.05"
            android:lineSpacingExtra="1.3sp"
            android:text="@string/default_dialog_cancel_caption"
            android:textColor="#ffffff"
            android:textSize="13.5sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/submitButton"
            app:layout_constraintTop_toBottomOf="@+id/messageTextView" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

이대로 실행할 경우 error가 발생한다. strings.xml 에 필요한 값이 누락되어 있기 때문이다. res/values/strings.xml 파일을 다음과 같이 수정해 보자.

<resources>
    <string name="app_name">MyCustomDialog</string>

    <!-- Fullscreen custom dialog -->
    <string name="default_dialog_title">다이얼로그 타이틀</string>
    <string name="default_dialog_message">다이얼로그 메시지</string>
    <string name="default_dialog_submit_caption">확인</string>
    <string name="default_dialog_cancel_caption">취소</string>
</resources>

모든 레이아웃 작업이 간단히 끝났다.

 

CustomDialogMaker 생성하기

CustomDialogMaker는 object로, Fullscreen Dialog를 쉽게 생성할 수 있도록 만들어 주는 일종의 유틸이다. getDialog 를 통해 어느 곳에서나 Custom Dialog 내 text를 수정하여 출력하는 기능을 제공한다.

 

우선, CustomDialogMaker.kt 에서 확인 버튼과 취소 버튼 각각의 이벤트를 전달할 수 있도록 interface 를 생성하자.

 

interface CustomDialogListener {
    fun onClickSubmitButton()
    fun onClickCancelButton()
}

 

각 버튼의 클릭 이벤트가 들어왔을 때 각각 이벤트에 따라 위 작성된 interface 를 target으로 실질적 구현부(ex-Activity)에서 이벤트를 수신하도록 했다. 말로 풀어쓰니 어려운데, 아래 코드(CustomDialogMaker.kt)를 확인하자.

 

object CustomDialogMaker {
    fun getDialog(
        context: Context,
        title: String,
        message: String,
        submitCaption: String,
        cancelCaption: String,
        target: CustomDialogListener
    ) {
        val dialog = Dialog(context, R.style.FullWindowDialog)
        val dialogBinding = DialogFullActivityBinding.inflate(dialog.layoutInflater)
        dialog.setContentView(dialogBinding.root)

        dialogBinding.titleTextView.text = title
        dialogBinding.messageTextView.text = message
        dialogBinding.submitButton.text = submitCaption
        dialogBinding.cancelButton.text = cancelCaption

        dialogBinding.submitButton.setOnClickListener {
            target.onClickSubmitButton()
            dialog.dismiss()
        }

        dialogBinding.cancelButton.setOnClickListener {
            target.onClickCancelButton()
            dialog.dismiss()
        }

        dialog.show()
    }
}

CustomDialogMaker.getDialog(인자) 로 호출할 때, 이것을 호출한 곳에서 onClickSubmitButton(), onClickCancelButton() 이벤트를 처리하도록 한 코드이다. findViewById 대신 viewBinding 을 이용하여 코드를 경량화하였다.

 

MainActivity 수정하기

MainActivity.kt 파일에서는 ViewBinding 대신 findViewById 를 이용하여 showDialogButton 에 onClickListener 를 추가하였고, 버튼 클릭 시Dialog 가 출력되도록 코드를 작성하였다.

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

        val showDialogButton = findViewById<Button>(R.id.showDialogButton)

        showDialogButton.setOnClickListener {
            CustomDialogMaker.getDialog(
                this,
                "title",
                "message",
                "submit",
                "cancel",
                object : CustomDialogListener {
                    override fun onClickSubmitButton() {
                        Toast.makeText(applicationContext, "SUBMIT!", Toast.LENGTH_SHORT).show()
                    }

                    override fun onClickCancelButton() {
                        Toast.makeText(applicationContext, "CANCEL!", Toast.LENGTH_SHORT).show()
                    }
                })
        }
    }
}

위 예시와 같이 CustomDialogMaker.getDialog(values..) 를 통해 CustomDialog 를 손쉽게 가져다 사용할 수 있었다.

 

마무리하며

위 형태가 베스트 케이스인지에 대해선 확신이 없으나, Custom Dialog의 전반적인 Layout은 유지하고 싶으나 Button의 text나 title, message의 변경이 필요할 때 사용하기 위해 작성하였다. dialog builder를 이용하여 생성하는 방법이 가장 쉬우나, 그 경우에는 fullscreen을 어떻게 세팅해 주어야 할지 감이 오지 않았다. 혹, 이 글을 읽는 분들 중 dialog builder를 이용해 fullscreen을 설정하는 방법을 아는 분이 계신다면 아이디어 공유 부탁드립니다.

 

예제 코드는 github repository에서 확인 가능하다. java/kotlin 두 가지 버전으로 구성해 두었으며, branch를 이동하여 확인할 수 있다.