[TIP] Android BottomSheetDialog Rounded Corner

Android BottomSheetDialog Rounded Corner - BottomSheetDialog 모서리 둥글게 만들기

 

 

결 과

 

 

@ res/values/themes.xml

<style name="BottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheet</item>
        <item name="android:colorBackground">@color/white</item>
</style>

<style name="BottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
</style>

다음과 같이 2개의 스타일을 정의해준다.

 

 

이후 해당 애플리케이션 테마 스타일 속에 bottomSheetDialogTheme를 추가하여 다음과 같이 지정해준다.

<style name="..." parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/light_first_deep</item>
        <item name="colorPrimaryVariant">@color/light_first_deep</item>
        <item name="colorOnPrimary">@color/white</item>
        
        <item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>
</style>

 

 

 

 

@ res/drawable/bg_top_corner.xml

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

위쪽 모서리를 둥글게하기 위하여 스타일 파일을 생성한다.

 

 

스타일을 꾸미는 자세한 방법은 내용은 아래글을 참조

 

[TIP] Android Style Background 꾸미기 - 테두리, 모서리 둥글게 등

 

 

 

 

@ res/layout/bottom_sheet_layout.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="@drawable/bg_top_corner">

이제 Bottom Sheet Dialog의 레이아웃의 background로 위에서 정의한 스타일을 지정해 준다.