ProgrammingAndroid

[Android] Fullscreen(Full Window, 전체 화면) Custom Dialog 만들기

, , , ,

개요

이번 포스팅에서는 전체 화면으로 Dialog를 띄우는 방법에 대해 알아볼 것이다. 전체 화면으로 동작하는 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 사용 선언을 우선 해 주어야 한다.

build.gradle
1
2
3
4
5
6
android {
    ...
    viewBinding {
    	enabled = true
    }
}

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


레이아웃 작업하기

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

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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 에 생성한 다음 아래 코드를 넣어 준다.

dialog_full_activity.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<?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 파일을 다음과 같이 수정해 보자.

strings.xml
1
2
3
4
5
6
7
8
9
<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 를 생성하자.

CustomDialogListener.kt
1
2
3
4
interface CustomDialogListener {
    fun onClickSubmitButton()
    fun onClickCancelButton()
}

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

CustomDialogMaker.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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 가 출력되도록 코드를 작성하였다.

MainActivity.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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를 이동하여 확인할 수 있다.


Share