Android Kotlin Custom Dialog(팝업)

 

 개복치개발자 강의는 아래의 링크에서 확인할 수 있습니다.

개복치개발자 | Linktree

 

 

 안드로이드에서 커스텀 다이얼로그를 한번 띄워보도록 하겠습니다.

 

 우선적으로 Dialog에 보일 레이아웃을 하나 만들어줘야 하는데

 

 custom_dialog.xml라고 만들어줬습니다.

 

 

	<?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">
	<EditText
	android:id="@+id/editText"
	android:layout_width="200dp"
	android:layout_height="wrap_content"
	android:layout_marginTop="140dp"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
	<Button
	android:id="@+id/successButton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="72dp"
	android:text="확인!"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/editText" />
	<Button
	android:id="@+id/closeButton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="닫기!"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/successButton" />
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw custom_dialog.xml hosted with ❤ by GitHub

 

 

 그리고 버튼을 누르면 이 Dialog가 띄워져야 하기 때문에, activity_main.xml에 button을 만들어주고

 

 

	<?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/startButton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="팝업아 나와랏!"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintLeft_toLeftOf="parent"
	app:layout_constraintRight_toRightOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw activity_main.xml hosted with ❤ by GitHub

 여기까지 레이아웃 부분을 만들어줬습니다. 

 

 그 다음 레이아웃과 MainActivity를 연결하는 것인데, viewbinding을 사용해서 연결합니다. viewvinding을 모르시면 이 포스트 참고해주세요.

 

 "팝업아 나와랏!" 버튼을 누르면 오른쪽과 같이 다이얼로그가 뜨도록 하려면 코드를 아래와 같이 MainActivity에 만듭니다.

 

 

	class MainActivity : AppCompatActivity() {
	private lateinit var binding: ActivityMainBinding
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	// 뷰 바인딩
	binding = ActivityMainBinding.inflate(layoutInflater)
	setContentView(binding.root)
	binding.startButton.setOnClickListener {
	// Dialog만들기
	val mDialogView = LayoutInflater.from(this).inflate(R.layout.custom_dialog, null)
	val mBuilder = AlertDialog.Builder(this)
	.setView(mDialogView)
	.setTitle("Login Form")
	mBuilder.show()
	}
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

 

 여기까지 하면 완료인데, dialog안에 확인 버튼과 닫기 버튼을 누르면 어떻게 할지 이벤트 처리도 해주도록 하겠습니다.

 

	class MainActivity : AppCompatActivity() {
	private lateinit var binding: ActivityMainBinding
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	// 뷰 바인딩
	binding = ActivityMainBinding.inflate(layoutInflater)
	setContentView(binding.root)
	binding.startButton.setOnClickListener {
	// Dialog만들기
	val mDialogView = LayoutInflater.from(this).inflate(R.layout.custom_dialog, null)
	val mBuilder = AlertDialog.Builder(this)
	.setView(mDialogView)
	.setTitle("Login Form")
	val mAlertDialog = mBuilder.show()
	val okButton = mDialogView.findViewById<Button>(R.id.successButton)
	okButton.setOnClickListener {
	Toast.makeText(this, "토스트 메시지", Toast.LENGTH_SHORT).show()
	}
	val noButton = mDialogView.findViewById<Button>(R.id.closeButton)
	noButton.setOnClickListener {
	mAlertDialog.dismiss()
	}
	}
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

 

 이렇게 하면 확인 버튼을 누르면 토스트 메세지가 뜨고

 

 닫기 버튼을 누르면 Dialog가 없어진는 것을 볼 수 있습니다.