BottomSheetDialogFragment의 ScrollView에서 radius와 clip 적용하기

1. ScrollView에 투명 배경과 함께 radius를 적용한다.

 

detail_bottom_sheet_dialog_bgr.xml

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

 

styles.xml

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

<style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="bottomSheetStyle">@style/BottomSheet</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />

 

ProductDetailFragment.kt

override fun getTheme(): Int = R.style.BottomSheetDialogTheme

 

그러면 radius를 적용했음에도 불구하고 scollview 안에 있는 아이템들이 fragment view 밖으로 벗어나 원하는 뷰가 나오지 않는다.

 

 

2. Scrollview에 radius 적용

@BindingAdapter("app:topRadius")
fun setScrollViewTopRadius(scrollView: ScrollView, radiusSize: Float) {
    scrollView.outlineProvider = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            outline.setRoundRect(
                0,
                0,
                view.width,
                view.height,
                radiusSize
            )
        }
    }
    scrollView.clipToOutline = true
}

<ScrollView
     android:id="@+id/scroll_view"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:scrollbars="none"
     app:topRadius="@{@dimen/spacing_large}">
     
     ....
     
     
</ScrollView>

outlineProvider를 커스텀하여 radius를 넣어주고 clipToOutline을 true로 해주면

이렇게 원했던 결과를 얻을 수 있다.