2018/08/27

ボトムシートダイアログの背景を角丸にする

ボトムシートダイアログの上辺だけを角丸にしたい.

ボトムシートの背景画像を定義する.

<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
  >
  <corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:radius="1dp"
    android:topLeftRadius="12dp"
    android:topRightRadius="12dp"
    />
  <solid android:color="#fff"/>
</shape>

ボトムシートダイアログのレイアウト背景に上記画像を設定する.

  <XxxLayout
    ...
    android:background="@drawable/bg_bottomsheet"
    >

このままだと、ウィンドウ背景色が塗りつぶされてしまうので, これを透過するスタイルを用意する.

<style name="AppTheme.ShareDialog" parent="Theme.Design.Light.BottomSheetDialog">
  <item name="android:windowCloseOnTouchOutside">true</item>
  <item name="android:windowIsTranslucent">true</item>
  <item name="android:windowContentOverlay">@null</item>
  <item name="android:colorBackground">@android:color/transparent</item>
  <item name="android:backgroundDimEnabled">true</item>
  <item name="android:backgroundDimAmount">0.3</item>
  <item name="android:windowFrame">@null</item>
  <item name="android:windowIsFloating">true</item>
</style>

スタイルを適用するダイアログを定義する.

private class HogeBottomSheetDialog(
  context: Context
) : BottomSheetDialog(
  context,
  R.style.AppTheme_ShareDialog
) {

done.

ダイアログのスタイルには parent="Theme.Design.Xxx.BottomSheetDialog" を継承したものを定義しないと,
Robolectricのテストで attr/bottomSheetStyle が解決できずtest failする.
Github robolectric/robolectric issue 2941

以上.