[Kotlin][JAVA] BottomSheetDialog 설명 및 사용 방법 (직접 커스텀해서 레이아웃 생성!)

안녕하세요.

 

 

안드로이드의 Dialog 종류 중 BottomSheetDialog 에 대해 알아보겠습니다.

 

 

Dialog 하면 흔히 기억하시는게

 

가운데에서 확인 버튼 누르는 알람 창을 떠올리실텐데요(AlertDialog)

 

또는,

 

날짜를 선택하는 다이얼로그 도 있구요.

 

 

 

하지만 

 

순위권에 있는 여러 앱들을 보면 종종 아래에서 올라오는 알림 창(또는 선택 창) 들이 있습니다.

 

 

SnackBar와 Toast 와는 다르게

 

Dialog 처럼 버튼과 내용이 존재하기도 하고, 이미지도 들어가있습니다.

 

즉, 하단에서 Modal을 들어올리는 Dialog 입니다.

(파일 공유같은)

 

 

 

이를 BottomSheetDialog 라고 합니다.

 

 

 

우선, 개발자 문서 링크입니다.

https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialog

BottomSheetDialog  |  Android 개발자  |  Android Developers

 

다음으로, 어떻게 생겼는지 캡쳐해보겠습니다.

 

 

테스트 앱 스크린샷

 

 

이건 제가 직접 커스텀했습니다. (다른 다이얼로그처럼 기본 화면이 없는 것 같더라구요.. setContentView로 레이아웃을 직접 넣습니다)

 

 

 

 

 

 

 

 

직접 레이아웃 xml 파일을 작성해서 집어넣는 방법도 있습니다.

(필자는 코드 상에서 레이아웃이 동적으로 변할 수 있기 때문에 코드 상에서 만들었습니다.)

*** 해당 블로그를 참고하셔도 좋습니다.

*** 이해필요없이 급하게 개발해야 하시는 분은 하단 링크로 가셔서 코드를 직접 참고하시면 됩니다.

https://codinginflow.com/tutorials/android/modal-bottom-sheet

Modal Bottom Sheet - Coding in Flow

 

 

 

 

 

그럼, 개발해봅시다!

 

 

1. gradle 추가하기

---

implementation 'com.google.android.material:material:1.3.0-alpha01'

  -  해당 라이브러리를 가져옵니다.

  -  하단 소스코드에서 라이브러리 최신 버전을 확인하시고, 해당 버전을 material: 뒤에 적어넣으시면 됩니다.

  -  https://github.com/material-components/material-components-android

material-components/material-components-android

 

 

 

 

 

 

 

2. MainActivity.kt ( java도 이와 비슷함)

---

// BottomSheetDialog 객체 생성. param : Context
val dialog = BottomSheetDialog(applicationContext) 

// 해당 BottomSheetDialog에 layout 설정. 직접 레이아웃 파일을 넣어도 되고(R.layout.~), layout 객체를 넣어도 됨.
dialog.setContentView(layout)	

// BottomSheetdialog 종료 시(뒤로가기 버튼) 발생하는 이벤트 리스너 삽입
dialog.setOnCancelListener { exitListener() }

// BottomSheetdialog 외부 화면(회색) 터치 시 종료 여부 boolean(false : ㄴㄴ, true : 종료하자!)
dialog.setCanceledOnTouchOutside(false)

// create()와 show()를 통해 출력!
dialog.create()
dialog.show()

 

  -  Java의 경우, BottomSheetDialog 객체 생성 부분과 리스너 설정을 제외하고는 똑같습니다.

 

  -  BottomSheetDialog dialog = new BottomSheetDialog(getApplicationContext()); 가 되겠죠 ?

 

  -  위 코드를 넣을 경우, 해당 레이아웃을 가진 BottomSheetDialog가 출력됩니다! 간단하죠~?

 

 

 

3. 레이아웃 커스텀(코드 - 동적. Kotlin)

---

var layout = LinearLayout(applicationContext)	// 레이아웃 생성(LinearLayout)
layout.orientation = LinearLayout.VERTICAL	// 레이아웃 orientation 설정
layout.gravity = Gravity.CENTER_VERTICAL	// gravity 설정

  -  레이아웃 객체 생성 및 기본 설정

 

 

 

 

// TextView 객체 생성 및 여러가지 설정
var titleTextView = TextView(applicationContext)
titleTextView.text = title
titleTextView.textSize = 25F
titleTextView.gravity = CENTER

// LayoutParams 객체 생성(width와 height 인자로 설정)
var params = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
        )
params.gravity = CENTER	// 해당 LayoutParams 의 Gravity 설정

// TextView 에 LayoutParams 적용
titleTextView.layoutParams = params

// 위에서 만든 레이아웃 객체에 해당 TextView add하기.
layout.addView(titleTextView)

  -  TextView Custom해서 레이아웃 객체에 Add 하기

  *** 그 외 Button이나 View 등 모든 View 객체들의 생성 방식도 위와 비슷하다.

  *** 설정도 하도 많이 있어서 필요한 설정은 검색을 통해 찾으시면 됩니다. (필자는 text, textSize, gravity 가 필요했다...)

 

 

 

 

 

참고로, 레이아웃 객체를 다 만든 다음 BottomSheetDialog 객체에 setContentView 해야 합니다!

 

 

이상입니다.

 

 

 

 

 

감사합니다!