[Android] BottomSheetDialogFragment 사용하기 (+ 둥근 모서리)

BottomSheetDialogFragment를 사용해 본 적은 여러번이나, 사용 할 때 다시 찾아보게 되었던 것 같아서 기록한다.

 

BottomSheetDialogFragment란 Material 라이브러리에서 제공해주는 클래스로, 하단 다이얼로그를 간단하게 생성하기 위해 만들어졌다. 기존의 레거시 코드에서는 BottomSheet 대신 Activity를 만들어, 뷰의 N% 크기만큼은 딤처리를 하고, 터치 시 finish()를 하도록 구현되어 있었다.

하지만 요즘 Activity를 하나만 만들고 프래그먼트로만 모두 처리하는 형태의 앱들이 나타나는 만큼, Activity는 Fragment에 비해 무겁고 속도가 느리다는 단점이 있다.

 

간단한 뷰를 만들 때에도 액티비티를 활용하는 것은 옳지 않다고 생각한다.

 

사용법

class VrogMoreInfoFragment : BottomSheetDialogFragment() {

}

프래그먼트를 생성하고 BottomSheetDialogFragment를 상속받으면 우선 끝이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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="wrap_content">
    
    ...

</androidx.appcompat.widget.LinearLayoutCompat>

원하는 대로 XML을 작성해주고

 

btnMoreInfo.setOnClickListener {
    val vrogMoreInfoFragment = VrogMoreInfoFragment().apply {
        setStyle(
            BottomSheetDialogFragment.STYLE_NORMAL,
            R.style.AppBottomSheetDialogBorder20WhiteTheme
        )
    }
    val bundle = Bundle()
    bundle.putString(Constant.EXTRA_MEM_ID, memId)
    bundle.putParcelable(Constant.EXTRA_MEM_DATA, userItemVo)
    bundle.putParcelable(Constant.EXTRA_MEM_ADD_DATA, userAddInfoItemVo)
    vrogMoreInfoFragment.arguments = bundle
    vrogMoreInfoFragment.show(supportFragmentManager, vrogMoreInfoFragment.tag)
}

기존 프래그먼트와 동일하게, 원하는 데이터를 bundle에 담아 arguments 보내어 사용하고, show()메서드를 활용해 화면에 띄워준다.

 

모서리 둥글게 만드는 법

styles.xml

<!-- bottomSheetFragment border 20dp 전용 테마 -->
<style name="AppBottomSheetDialogBorder20WhiteTheme"
    parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalBorder20WhiteStyle</item>
    <item name="android:windowIsFloating">false</item>
</style>

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

Theme.Design.Light.BottomSheetDialog를 상속받는 전용 테마를 만들어주어 테마를 입힐 수 있다.

 

bottom_sheet_white_20은 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="24dp"
        android:topRightRadius="24dp" />
    <solid
        android:color="@color/C_ffffff"/>
</shape>

 

스타일을 적용하기 위해, 다이얼로그를 생성하는 부분에서 setStyle을 사용할 수 있다.

val vrogMoreInfoFragment = VrogMoreInfoFragment().apply {
    setStyle(
        BottomSheetDialogFragment.STYLE_NORMAL,
        R.style.AppBottomSheetDialogBorder20WhiteTheme
    )
}

 

추가

behavior를 등록하여 다이얼로그의 상태를 조절 할 수도 있다.

 

바텀시트 다이어그램 xml 최상단

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"

 

바텀시트 다이어그램 프래그먼트 구현부

dialog?.let { dialog ->
    val bottomSheet =
        dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as FrameLayout?
    val behavior: BottomSheetBehavior<FrameLayout> = BottomSheetBehavior.from(bottomSheet!!)

    val layoutParams = bottomSheet.layoutParams
    layoutParams.height = Utils.dpToPx(context, 230)/*(resources.displayMetrics.widthPixels * 0.4).toInt()*/
    bottomSheet.layoutParams = layoutParams

    behavior.state = BottomSheetBehavior.STATE_EXPANDED
    behavior.isDraggable = false
    behavior.isHideable = false
    setStyle(DialogFragment.STYLE_NORMAL, R.style.AppBottomSheetDialogBorder20Theme)
}

간단한 예시이며, 하나씩 살펴보면, 높이를 230dp로 고정하기 위해 layoutParams을 변경해주었고, 드래그 허용과, 하이드 허용을 하지 않기 위해 behavior의 속성을 변경하였으며, 초기 상태를 STATE_EXPANDED로 지정하였다.

 

결과

 

참고

https://todaycode.tistory.com/185

Bottom Sheet Dialog 예제 : Modal, Persistent, 모서리 둥글게 등

https://velog.io/@eoqkrskfk94/Bottom-Sheet-Dialog-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

Bottom Sheet Dialog 구현하기

후기

기존에 사용했던 방식이기에, 정리만 한다고 생각하며 작성한 것이라 크게 어렵지 않았다.

추가적으로 필요한 내용들은 xml과 구현부분에서 전부 처리 할 수 있기에 자세하게 작성하지는 않았다.

예전에 바텀다이얼로그의 모서리를 둥글게 만드는 것이 어려워서 매번 찾아봤던 것을 생각하면, 작성해두면 좋겠다고 생각했다.