[Android/Kotlin] Bottom Sheet Dialog Fragment 사용법

안녕하세요 골드입니다.

오늘은 안드로이드에 새롭게 업데이트된 Bottom Sheet Dialog 사용법에 대해서 알아보도록 하겠습니다. Bottom Sheet을 사용하면 아주 쉽게 밑에서 올라오는 팝업창을 만들 수 있습니다. 결과물을 먼저 보여드리면 이런 모습입니다.

 

 

bottom sheet

 

 

1. 의존성 라이브러리 추가와 프래그먼트 생성

먼저 build.gradle(module)에 dependency {} 안에 라이브러리를 하나 추가합니다.

 

 

Bottom sheet은 기본 제공되는 view가 아니기 때문에 라이브러리를 추가해야만 사용할 수 있습니다. 라이브러리를 추가한 후 오른쪽 위에 Sync Now를 클릭합니다.

 

그다음 저는 프래그먼트를 하나 생성하도록 하겠습니다. 여러분의 자바 패키지에서 마우스 오른쪽 클릭 New -> Fragment -> Fragment(Blank)를 클릭하고 원하는 이름을 입력해서 만들면 됩니다.

 

 

저는 프래그먼트 이름을 BottomSheet이라고 짓겠습니다. 

 

 

 프래그먼트를 만든 것이기 때문에 Fragment()를 상속받고 있었을 것입니다. 해당 부분을 지우고 BottomSheetDialogFragment()를 상속받도록 바꿔줍니다. 다른 코드도 모두 지우고 onCreateView만 남겨놓았습니다. 위 방식으로 프래그먼트를 생성하였다면 자동으로 생성된 레이아웃을 인플레이트 하였을 것이고, 만약 그렇지 않다면 레이아웃을 새로 생성하고 인플레이트 하면 됩니다.

 

 

2. XML 파일 작성

 Bottom Sheet에서 인플레이트한 레이아웃과 메인 액티비티 레이아웃 파일을 작성하도록 합니다. 메인 액티비티는 간단한 예제답게 버튼 하나만 두도록 하겠습니다. 처음 생성하면 볼 수 있는 <TextView> 태그를 <Button> 태그로 변경하여 버튼을 하나 두도록 하겠습니다. 프래그먼트에서 사용할 레이아웃 파일도 간단하게 TextView와 Button을 두도록 하겠습니다.

 

 

 이제 레이아웃을 만들었습니다. 메인 액티비티에 있는 버튼을 클릭하면 Bottom Sheet Dialog가 나타나고 이 Dialog는 TextView와 Button을 가지고 있을 것입니다.

 

 

3. Kotlin 파일 작성

 

 

메인 액티비티에 버튼 클릭 리스너를 추가합니다. 단순히 버튼을 클릭하면 BottomSheet 프래그먼트를 보여주는 코드입니다. 여기까지 완료하였다면 버튼을 클릭하였을 때 아래 방향에서 Dialog가 나타나는 것을 확인할 수 있을 것입니다.

 

가상 머신으로 확인해보겠습니다.

 

 

잘 작동하는 것을 확인할 수 있습니다. 이후에 Dialog 버튼에 리스너를 넣을 수도 있고 프래그먼트로 데이터를 전송해서 다양한 작업을 진행할 수 있을 것입니다.

 

여기까지 골드였습니다.

감사합니다.

 

참고자료 :

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

BottomSheetDialog  |  Android 개발자  |  Android Developers