Android - Bottom Dialog (BottomSheetDialogFragment)

앱을 사용하다보면, 특정 시점에 하단에서부터 Dialog가 보여지면서 정보를 제공하는 경우가 있다.(구글 맵, 네이버 지도 등)

 

이런 기능을 구현할 때 다양한 라이브러리들이 있고, 직접 애니메이션 구현을 통해 Dialog를 생성해도 되지만, 이런 방법보다 Google Material Design에서 제공하는 BottomSheetDialogFragment를 이용해 손쉽게 생성할 수 있다.

 

먼저 build.gradle(app)에 google material design을 dependency에 추가해준다.

implementation 'com.google.android.material:material:1.1.0'

 

그 다음 BottomSheetDialogFragment를 상속받아 구현한다.

class BottomMenuDialog : BottomSheetDialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.dialog_menu,container,false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        //TODO do something with view.. 
    }
}

 

구현한 Dialog를 호출할 곳에서 아래와 같이 사용한다.

BottomMenuDialog().show(supportFragmentManager, TAG)

 

추가적으로 Dialog의 코너의 라운딩처리는 setStyle() 메서드를 활용하면 된다.

 

border_menu.xml에 shape를 정의한다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:radius="32dp" />
    <solid android:color="#ffffff" />
</shape>

 

styles.xml에 BottomSheetDialog style을 추가한다.

    <style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>

    <style name="AppModalStyle"
        parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/border_menu</item>
    </style>

 

호출이 필요한 곳에서 아래와 같이 사용한다.

BottomMenuDialog().run {
	setStyle(DialogFragment.STYLE_NORMAL, R.style.AppBottomSheetDialogTheme)
	show(supportFragmentManager, TAG)
}

 

참고자료:

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

BottomSheetDialogFragment  |  Android 개발자  |  Android Developers

https://stackoverflow.com/questions/43852562/round-corner-for-bottomsheetdialogfragment/50645769

Round corner for BottomSheetDialogFragment