BottomSheetDialogFragmentを扱う

BottomSheetDialogFragmentを使う

実装方法

1. styleの追加
2. BottomSheetDialogFragmentのサブクラスの実装

1. styleの追加

styles.xmlファイルに、BottomSheetDialogFragmentのテーマを定義する。

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog"/>

2. サブクラスの実装

BottomSheetDialogFragmentを継承したクラスを作成する。 このクラスのコンストラクタにはダイアログのコンテンツとなるレイアウトファイルのリソースIDを指定しておく。

import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.google.android.material.bottomsheet.BottomSheetDialog
import android.app.Dialog
import android.os.Bundle

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
    }
}

ダイアログで表示するためのレイアウトファイルfragment_bottom_sheet_dialog.xmlも作成しておく。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:gravity="center"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="hello_world!!"/>

</FrameLayout>

以下のコードでダイアログを表示できる。

import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

  ...

  fun showDialog() {
    val dialog = CustomBottomSheetDialogFragment()
    dialog.show(supportFragmentManager, null)
  }
}

ナビゲーションバーの表示を調整する

デフォルトではナビゲーションバーが透過して表示されることがあるので、styleにandroid:windowIsFloating="false"を設定する。

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
</style>

さらにダイアログの背景色とナビゲーションバーの色を合わせたい場合は、以下のように設定する。

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

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="android:navigationBarColor">@android:color/darker_gray</item>
    <item name="bottomSheetStyle">@style/BottomSheet</item>
</style>

最初に表示される高さを調整する

**BottomSheetBehavior**を使う。ActivityのレイアウトがCoordinatorLayoutでないと使えないため注意。

ダイアログが表示されるタイミングでBottomSheetBehaviorを取得し、peekHeightとstateを設定する。

import com.google.android.material.bottomsheet.BottomSheetBehavior

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
            .also { dialog ->
                dialog.setOnShowListener {
                    dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
                        ?.let {
                            val behavior = BottomSheetBehavior.from(it)
                            behavior.peekHeight =
                                resources.getDimensionPixelSize(R.dimen.bottom_sheet_dialog_initial_height)
                            behavior.state = BottomSheetBehavior.STATE_COLLAPSED
                        }
                }
            }
    }
}