[Android, Kotlin] android custom dialog 만들기

custom dialog는 안드로이드를 개발하면서 자주 쓰이는 팝업 창을 생성해주는 기능이다.

필자도 많이 자주 쓰지만, 많이 까먹기(?) 때문에 이번에 기록을 남겨보려 한다.

 

---

 

custom dialog 만드는 방법

1. custom dialog로 사용할 xml 파일 만들기

먼저 dialog의 xml로 레이아웃을 만들어 준다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/title_image"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="20dp"
        android:src="@drawable/addimage"
        android:layout_gravity="center"/>

    <LinearLayout
        android:id="@+id/chat_info_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="20dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title_image">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/dalseohealingbold"
            android:text="이름: "
            android:textSize="25sp" 
            android:layout_marginEnd="10dp"/>

        <EditText
            android:id="@+id/chatting_room_edit_text"
            android:layout_width="230dp"
            android:layout_height="60dp"
            android:background="@color/white"
            android:fontFamily="@font/dalseohealingbold"
            android:hint="채팅방 이름"
            android:maxLines="1"
            android:textSize="22sp" />
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="50dp"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/create_chatting_room"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/greenyellow"
            android:fontFamily="@font/dalseohealingbold"
            android:text="생성" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/cancel_create"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/greenyellow"
            android:fontFamily="@font/dalseohealingbold"
            android:text="취소" />
    </LinearLayout>
</LinearLayout>

다이얼로그 레이아웃 xml

2. 다이얼로그 생성하기

일단 필자는 다이얼로그를 뷰 바인딩으로 구현 할 것이기 때문에 그래들에 추가해주었다.

viewBinding {
    enabled = true
}

그 다음에 다이얼로그를 구현한다.(필자는 fragment에 다이얼로그를 구현했다.)

 

activity?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
val dialogBinding = DialogCreateRandomChattingBinding.inflate(layoutInflater)
val dialogBuilder = AlertDialog.Builder(context)
    .setView(dialogBinding.root)

val dialog = dialogBuilder.show()
dialogLogic(dialogBinding, dialog)	// 다이얼로그의 기능을 담은 함수

 

실행 결과

다이얼로그가 잘 생성이 되었다.

 

---

 

약간의 tmi을 남기면

custom dialog의 기본 width, height는 wrap_content 이기 때문에 xml로 짠 모습과 다르게 나올 수 있다.그래서 필자는 기본 width, height를 바꿀 방법을 검색해 보았지만 잘 나오지 않았다. 그래서 그냥 xml을 wrap_content를 기준으로 해서 코드를 짰다.