본문 바로가기
📱| Android/📘 | 기록

[Android, Kotlin] android custom dialog 만들기

by immgga 2022. 11. 20.

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를 기준으로 해서 코드를 짰다.

728x90