Custom Dialog 만들기

# 기본 다이얼로그 

안드로이드에서 제공하는 기본 다이얼로그를 사용하는 방법은 아래와같이 setView, setTitle을 사용해서 작성해주면 된다.

// 다이얼로그창 띄우는 함수
private fun showDialog(){

    val mDialogView = LayoutInflater.from(this).inflate(R.layout.activity_community_dialog, null)

    val mBuilder = AlertDialog.Builder(this)
        .setView(mDialogView)
        .setTitle("게시글 수정,삭제")

    val alertDialog = mBuilder.show()


    // 수정버튼 눌렀을때
    alertDialog.findViewById<Button>(R.id.dialog_edit_btn)?.setOnClickListener {
        Toast.makeText(this, "수정버튼 테스트", Toast.LENGTH_SHORT).show()
    }

    // 삭제버튼 눌렀을때
    alertDialog.findViewById<Button>(R.id.dialog_delete_btn)?.setOnClickListener {
        Toast.makeText(this, "삭제완료", Toast.LENGTH_SHORT).show()
    }


}

 

 

 

# 커스텀 다이얼로그 

근데 기본다이얼로그보다 커스텀 다이얼로그를 더 많이 사용하기 때문에 커스텀 사용하는 방법을 작성해보려고 한다

먼저 레이아웃파일을 생성해서 다이얼로그에 들어갈 창을 디자인해준다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:minWidth="315dp"
    android:padding="16dp"
    android:background="@color/gray"
    android:orientation="vertical">

    <TextView
        android:id="@+id/dialogTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:textSize="20sp"
        android:paddingTop="5dp"
        style="@style/TextStyle"
        tools:text="게시글 수정,삭제하기"/>

    <!--    <TextView-->
    <!--        android:id="@+id/dialog_desc_tv"-->
    <!--        android:layout_width="match_parent"-->
    <!--        android:layout_height="wrap_content"-->
    <!--        android:layout_marginTop="8dp"-->
    <!--        android:gravity="center"-->
    <!--        android:textSize="14sp"-->
    <!--        tools:text="확인 설명 메시지"/>-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/dialog_edit_btn"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:layout_marginEnd="8dp"
            android:layout_weight="1"
            android:background="@drawable/button_radius_green"
            style="@style/TextStyle2"
            android:text="수정"
            android:textStyle="bold" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/dialog_delete_btn"
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:layout_weight="1"
            style="@style/TextStyle2"
            android:background="@drawable/button_radius_green"
            android:text="삭제" />

    </LinearLayout>

</LinearLayout>

activity_community_dialog.xml

 

activity_community_dialog.xml

 

 

 

이제 BoardInsideActivity로가서 코드를 작성해준다

 

먼저 다이어로그를 보여주는 함수인 showDialog함수를 만들어주고 아래와같이 코드를 작성해준다

기본 다이얼로그에는 타이틀바가 있기때문에 타이틀바를 제거해주는 코드를 작성해줘야한다 

 

그리고 threedot이미지 클릭했을때 

message라는 변수에 "게시글 수정,삭제하기" 라는 텍스트를 넣어주고, showDialog함수를 실행해주는데 message를 넣어서 실행시켜준다 

그 다음 showDialog함수 내에서 이 message를 내가 연결하고싶은 레이아웃과 연결해주면 된다 

class BoardInsideActivity : AppCompatActivity() {

    private val TAG = BoardInsideActivity::class.java.simpleName

    private lateinit var binding : ActivityBoardInsideActiviyBinding

    private val boardList = mutableListOf<CommunityBoardModel>()



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_board_inside_activiy)

     
       ...


        // threedot클릭시
        binding.threedot.setOnClickListener {

            // 텍스트 집어넣기
            val message : String? = "게시글 수정,삭제하기"
            // 다이얼로그 표시
            showDialog(message)
        }



    }

    ...
  
  
    // 다이얼로그 보여주는 함수
    private fun showDialog(message:String?) {

        val dialog = Dialog(this)

        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)            //타이틀바 제거
        dialog.setContentView(R.layout.activity_community_dialog)       //다이얼로그에 사용할 xml 파일을 불러옴
        dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))  // 레이아웃 배경을 투명하게

        val dialogTitle : TextView = dialog.findViewById(R.id.dialogTitle)
        val editBtn : Button = dialog.findViewById(R.id.dialog_edit_btn)
        val deleteBtn : Button = dialog.findViewById(R.id.dialog_delete_btn)

        // dialogTitle와 message 연결
        dialogTitle.text = message

        // 수정버튼 눌렀을때
        editBtn.setOnClickListener {
            Toast.makeText(this, "수정버튼 누름", Toast.LENGTH_SHORT).show()
        }

        // 삭제버튼 눌렀을때
        deleteBtn.setOnClickListener {
            Toast.makeText(this, "삭제버튼 누름", Toast.LENGTH_SHORT).show()
        }

        dialog.show()

    }

}

BoardInsideActivity.kt

 

이렇게 해주면 해당버튼(threedot버튼)을 눌렀을때 커스텀다이얼로그가 잘 뜨고, message에 넣어놨던 텍스트도 내가 설정해놓은 위치에 잘 표시된것을 확인할수있다

 

 

지금은 수정,삭제버튼 눌렀을때 토스트 메세지만 표시했지만 기능이 구현되도록 추가해줘야할것이다

 

 

 

 

 

 

 

 

 

해당 유튜브를 참고하여 작성했다 

 

https://www.youtube.com/watch?v=CAmUcMq-tsM&list=TLPQMjEwMjIwMjQDEHYPbWkCbA&index=1