[ 안드로이드 ] BottomSheet + CoordinatorLayout 테두리 Radius 설정 안먹힐 때

 

문제 상황

BottomSheetDialogFragment 안에 CoordinatorLayout으로 화면을 구성해둔 상태에서 바텀 시트의 테두리에 Radius 속성을 적용하려했는데 적용되지 않았다.

 

    <style name="Theme.Smiley" ... >
    	/* 메인 style */
    	<item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
    </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/background_bottom_sheet</item>
        <item name="behavior_peekHeight">270dp</item>
    </style>

위의 방법으로 다른 바텀 시트는 다 적용이 잘 되는데 CoordinatorLayout이 들어간 바텀 시트에만 적용이 안되고 있었다.

CoordinatorLayout이 바텀 시트를 덮어쓰고 있는 것 같아서 CoordinatLayout의 Radius를 조절해주니까 잘 적용이 된다.

 

방법은 아래와 같다.

 

적용 방법

    /**
     * 바텀시트 코너 Radius 지정
     */
    private fun initCoordinatorLayout(){
        bind.coordinatorLayout.outlineProvider = object : ViewOutlineProvider() {
            override fun getOutline(view: View, outline: Outline) {
                outline.setRoundRect(
                    0,
                    0,
                    view.width,
                    view.height,
                    requireActivity().convertDpToPx(30).toFloat()
                )
            }
        }
        bind.coordinatorLayout.clipToOutline = true
    }

너무 간단하게 그냥 outlineProvider를 정의해주면 된다. 기존 바텀 시트의 테두리 곡률과 동일하게 선언하기 위해서 convertDpToPx 메소드를 사용해서 지정해줬다.

 

ConvertDpToPx 메소드

fun Context.convertDpToPx(dp:Int): Int {
    val density = resources.displayMetrics.density
    return (dp * density).roundToInt()
}

 

적용 결과