How to implement edge-to-edge with bottomsheet dialog android

Question

I have an android application entirely based on immersive mode. I have managed to go edge-to-edge for the entire application but when I open a bottom sheet dialog with peek height of uptop 90% of the screen and a scrollview to accomodate a long form. However, when I open the bottom sheet, there is a blank space at the bottom of the view which is exactly the size of the system navigation bar. Is there a way to remove that space and have the bottom sheet extend right upto the bottom of the screen?

Here's a snapshot of the bottom sheet fully expanded

EDIT: Added Example of My bottomsheet dialog class-

class MyBottomSheetDialog
constructor(val ctx: Context, val height: Int) :
    BaseDialog(ctx) {
...
override fun onStart() {
        super.onStart()
        binding.root.layoutParams.height = height
        binding.root.requestLayout()
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        window?.let {
            WindowCompat.setDecorFitsSystemWindows(
                it,false
            )
        }
        findViewById<View>(com.google.android.material.R.id.container)?.fitsSystemWindows = false
        findViewById<View>(com.google.android.material.R.id.coordinator)?.fitsSystemWindows = false
    }
...
}

And The base class is-

open class BaseDialog
constructor(
    private val dialogContext: Context) : BottomSheetDialog(dialogContext, style) {

override fun onStart() {
        super.onStart()
        hideNavigation()
    }

    private fun hideNavigation() {
        window?.apply {
            val uiOptions: Int = decorView.systemUiVisibility
            val newUiOptions = uiOptions or
                    View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or
                    View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                    View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                    View.SYSTEM_UI_FLAG_FULLSCREEN

            decorView.systemUiVisibility = newUiOptions

            setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
            setGravity(Gravity.BOTTOM)
        }
    }
}

Answer 1

According to the Material Bottom Sheet doc:

On API 21 and above the modal bottom sheet will be rendered fullscreen (edge to edge) if the navigation bar is transparent and app:enableEdgeToEdge is true. To enable edge-to-edge by default for modal bottom sheets, you can override ?attr/bottomSheetDialogTheme like the below example:

<style name="AppTheme" parent="Theme.Material3.*">
  ...
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.App.BottomSheetDialog</item>
</style>

<style name="ThemeOverlay.App.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
    <item name="android:navigationBarColor" tools:ignore="NewApi">@android:color/transparent</item>
</style>

in your theme file. See also Google edge to edge training page.

Answer 2

In your bottomSheetFragment

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog =
    object : BottomSheetDialog(requireContext(), theme) {
        override fun onAttachedToWindow() {
            super.onAttachedToWindow()

            window?.let {
                WindowCompat.setDecorFitsSystemWindows(it, false)
            }

            findViewById<View>(com.google.android.material.R.id.container)?.apply {
                fitsSystemWindows = false
                ViewCompat.setOnApplyWindowInsetsListener(this) { view, insets ->
                    insets.apply {
                        view.updatePadding(bottom = 0)
                    }
                }
            }

            findViewById<View>(com.google.android.material.R.id.coordinator)?.fitsSystemWindows = false
        }
    }

in themes:

<item name="bottomSheetDialogTheme">@style/BottomSheetDialogTheme</item>

in styles:

  <style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
    <item name="android:navigationBarColor">@color/transparent</item>
    <item name="android:windowLightStatusBar">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:statusBarColor">@color/transparent</item>
</style>

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