BottomSheetDialogFragmentの角を丸くする

Modal Bottom Sheets - Material Components for Android

Material ComponentsのBottomSheetDialogFragmentの角はデフォルトで丸くありませんが、Twitterなどを見ると上部の角が丸くなっているデザインをよくみます。これのやり方です。

完成形はこんな感じです。
（Layoutの勉強でTwitterを真似して作ってます）

方法は2パターン

やり方は2通りあります。
1. BottomSheetDialogFragmentのデフォルトのThemeをOverrideする方法
2. Themeを新しく作って個別にデザインを適用する方法

個人的には2の方がいいかなと思いますが、両方書いておきます。なお、普通にLayoutのBackgroundに書いても適用されません。Themeの設定が後ガチするようですね。

BottomSheetDialogFragmentのデフォルトのThemeをOverrideする方法

まず、Dialogを角丸にするshapeのDrawableリソースを作成します。ここではファイル名をrounded_dialog.xmlにします。

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

次にstyles.xmlにてデフォルトのBottomSheetDialogFragmentのThemeをOverrideします。

<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/rounded_dialog</item>
</style>

これで全体に適用されます🙋‍♂️

Themeを新しく作って個別にデザインを適用する方法

全体の方法では、表示する場所によってデザインを変更するなどができません。角を丸くしたくない場合もありますよね。この方法ではそれぞれでThemeを適用できます。

まず、Dialogを角丸にするshapeのDrawableリソースを作成します。ここではファイル名をrounded_dialog.xmlにします（デジャブ）。

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

次にThemeを作成します。この時parentにBottomSheetDialogを指定して継承しています。ThemeとModalStyleの2つ作りましょう。

<!-- Twitter Bottom Sheet Dialog -->
<style name="MyBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
   <item name="bottomSheetStyle">@style/TwitterModalStyle</item>
</style>
<style name="MyModalStyle" parent="Widget.Design.BottomSheet.Modal">
   <item name="android:background">@drawable/rounded_dialog</item>
</style>

作ったら、BottomSheetDialogFragmentの実装クラスの方で、getTheme() をOverrideして作ったThemeを返すようにします。

class MyDialogFragment : BottomSheetDialogFragment() {
 
   override fun getTheme(): Int {
       return R.style.MyBottomSheetDialogTheme
   }
}

これでOKです。あまり手間も変わりませんし、柔軟性もあるのでこの方法が良さそうですね😍