Support edge to edge.

- In material components' BottomSheetDialog, edgeToEdgeEnabled is initialized with attribute 'enableEdgeToEdge'. So, new style is added control it when BottomSheetDialogWrapper is created.
- when enableEdgeToEdge is true, paddingBottomSystemWindowInsets attribute should be false to support full height sheet.

edgeToEdge is working when meet these conditions from material components BottomSheetDialog.
- transparent navigation bar color is required (alpha < 1)
- enableEdgeToEdge = true

Author: workspace

app/src/main/kotlin/com/holix/android/bottomsheetdialogcomposedemo/MainActivity.kt

@@ -47,6 +47,9 @@ class MainActivity : AppCompatActivity() {
                 var dismissWithAnimation by remember {
                     mutableStateOf(false)
                 }
+                var enableEdgeToEdge by remember {
+                    mutableStateOf(false)
+                }
                 // NavigationBarProperties
                 val surfaceColor = MaterialTheme.colors.surface
                 var navigationBarColor by remember(surfaceColor) {
@@ -102,6 +105,7 @@ class MainActivity : AppCompatActivity() {
                             dismissOnBackPress = dismissOnBackPress,
                             dismissOnClickOutside = dismissOnClickOutside,
                             dismissWithAnimation = dismissWithAnimation,
+                            enableEdgeToEdge = enableEdgeToEdge,
                             navigationBarProperties = NavigationBarProperties(
                                 color = navigationBarColor,
                                 darkIcons = when (darkIcons) {
@@ -131,9 +135,10 @@ class MainActivity : AppCompatActivity() {
                         ) {
                             Column(
                                 modifier = Modifier
+                                    .verticalScroll(rememberScrollState())
+                                    .navigationBarsPadding() // for enableEdgeToEdge = true
                                     .fillMaxWidth()
-                                    .padding(16.dp)
-                                    .verticalScroll(rememberScrollState()),
+                                    .padding(16.dp),
                                 verticalArrangement = Arrangement.spacedBy(16.dp)
                             ) {
                                 Text(text = "Title", style = MaterialTheme.typography.h5)
@@ -179,6 +184,13 @@ class MainActivity : AppCompatActivity() {
                                 },
                                 label = "dismissWithAnimation"
                             )
+                            BooleanPreference(
+                                value = enableEdgeToEdge,
+                                onValueChange = {
+                                    enableEdgeToEdge = it
+                                },
+                                label = "enableEdgeToEdge"
+                            )
                             PreferenceCategory("NavigationBarProperties")
                             ColorPreference(
                                 value = navigationBarColor,

app/src/main/kotlin/com/holix/android/bottomsheetdialogcomposedemo/preferences/ColorPreference.kt

@@ -20,6 +20,7 @@ import com.github.skydoves.colorpicker.compose.*
 import com.holix.android.bottomsheetdialog.compose.BottomSheetBehaviorProperties
 import com.holix.android.bottomsheetdialog.compose.BottomSheetDialog
 import com.holix.android.bottomsheetdialog.compose.BottomSheetDialogProperties
+import com.holix.android.bottomsheetdialog.compose.NavigationBarProperties
 
 @Composable
 fun ColorPreference(
@@ -42,6 +43,9 @@ fun ColorPreference(
                 behaviorProperties = BottomSheetBehaviorProperties(
                     state = BottomSheetBehaviorProperties.State.Expanded,
                     skipCollapsed = true
+                ),
+                navigationBarProperties = NavigationBarProperties(
+                    color = targetColor
                 )
             )
         ) {

bottomsheetdialog-compose/src/main/kotlin/com/holix/android/bottomsheetdialog/compose/BottomSheetDialog.kt

@@ -52,6 +52,7 @@ class BottomSheetDialogProperties constructor(
     val dismissOnBackPress: Boolean = true,
     val dismissOnClickOutside: Boolean = true,
     val dismissWithAnimation: Boolean = false,
+    val enableEdgeToEdge: Boolean = false,
     val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
     val navigationBarProperties: NavigationBarProperties = NavigationBarProperties(),
     val behaviorProperties: BottomSheetBehaviorProperties = BottomSheetBehaviorProperties()
@@ -68,6 +69,7 @@ class BottomSheetDialogProperties constructor(
         dismissOnBackPress,
         dismissOnClickOutside,
         dismissWithAnimation,
+        false,
         securePolicy,
         NavigationBarProperties(color = navigationBarColor)
     )
@@ -79,6 +81,7 @@ class BottomSheetDialogProperties constructor(
         if (dismissOnBackPress != other.dismissOnBackPress) return false
         if (dismissOnClickOutside != other.dismissOnClickOutside) return false
         if (dismissWithAnimation != other.dismissWithAnimation) return false
+        if (enableEdgeToEdge != other.enableEdgeToEdge) return false
         if (securePolicy != other.securePolicy) return false
         if (navigationBarProperties != other.navigationBarProperties) return false
         if (behaviorProperties != other.behaviorProperties) return false
@@ -90,6 +93,7 @@ class BottomSheetDialogProperties constructor(
         var result = dismissOnBackPress.hashCode()
         result = 31 * result + dismissOnClickOutside.hashCode()
         result = 31 * result + dismissWithAnimation.hashCode()
+        result = 31 * result + enableEdgeToEdge.hashCode()
         result = 31 * result + securePolicy.hashCode()
         result = 31 * result + navigationBarProperties.hashCode()
         result = 31 * result + behaviorProperties.hashCode()
@@ -339,11 +343,14 @@ private class BottomSheetDialogWrapper(
     density: Density,
     dialogId: UUID
 ) : BottomSheetDialog(
-    /**
-     * [Window.setClipToOutline] is only available from 22+, but the style attribute exists on 21.
-     * So use a wrapped context that sets this attribute for compatibility back to 21.
-     */
-    ContextThemeWrapper(composeView.context, R.style.TransparentBottomSheetTheme)
+    ContextThemeWrapper(
+        composeView.context,
+        if (properties.enableEdgeToEdge) {
+            R.style.TransparentEdgeToEdgeEnabledBottomSheetTheme
+        } else {
+            R.style.TransparentEdgeToEdgeDisabledBottomSheetTheme
+        }
+    )
 ),
     ViewRootForInspector {
     private val bottomSheetDialogLayout: BottomSheetDialogLayout

bottomsheetdialog-compose/src/main/res/values/styles.xml

@@ -1,10 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="TransparentBottomSheetTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
-        <item name="bottomSheetDialogTheme">@style/TransparentBottomSheetDialog</item>
+    <style name="TransparentEdgeToEdgeEnabledBottomSheetTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
+        <item name="bottomSheetDialogTheme">@style/TransparentEdgeToEdgeEnabledBottomSheetDialog</item>
+    </style>
+    <style name="TransparentEdgeToEdgeDisabledBottomSheetTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
+        <item name="bottomSheetDialogTheme">@style/TransparentEdgeToEdgeDisabledBottomSheetDialog</item>
+    </style>
+
+    <style name="TransparentEdgeToEdgeEnabledBottomSheetDialog" parent="BaseTransparentBottomSheetDialog">
+        <item name="enableEdgeToEdge">true</item>
+        <item name="paddingBottomSystemWindowInsets">false</item>
+        <item name="paddingLeftSystemWindowInsets">true</item>
+        <item name="paddingRightSystemWindowInsets">true</item>
+        <item name="paddingTopSystemWindowInsets">true</item>
+    </style>
+
+    <style name="TransparentEdgeToEdgeDisabledBottomSheetDialog" parent="BaseTransparentBottomSheetDialog">
+        <item name="enableEdgeToEdge">false</item>
+        <item name="paddingBottomSystemWindowInsets">true</item>
+        <item name="paddingLeftSystemWindowInsets">true</item>
+        <item name="paddingRightSystemWindowInsets">true</item>
+        <item name="paddingTopSystemWindowInsets">true</item>
     </style>
 
-    <style name="TransparentBottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
+    <style name="BaseTransparentBottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
         <item name="bottomSheetStyle">@style/TransparentBottomSheet</item>
         <item name="android:windowClipToOutline">false</item>
         <item name="android:windowBackground">@android:color/transparent</item>