Fix a bug where bottom sheet content is visible underneath the system…

… navigation bar
Orange-OpenSource · Feb 24, 2025 · 720ede8 · 720ede8
1 parent f125772
commit 720ede8
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 40 deletions.
diff --git a/app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt b/app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt
@@ -14,11 +14,27 @@ package com.orange.ouds.app.ui
 
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -28,30 +44,46 @@ import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.utilities.UiModePreviews
 
 @Composable
-fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit) {
-    val items = BottomBarItem.entries.toTypedArray()
-    NavigationBar(
-        containerColor = OudsTheme.colorScheme.background.secondary, //TODO Temporary color. Waiting for Material colors from Maxime.
-        content = {
-            items.forEach { item ->
-                NavigationBarItem(
-                    selected = currentRoute == item.route,
-                    icon = {
-                        Icon(painterResource(item.iconRes), null)
-                    },
-                    label = {
-                        Text(
-                            text = stringResource(item.titleRes),
-                            maxLines = 1,
-                            overflow = TextOverflow.Ellipsis,
+fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit, visible: Boolean = true) {
+    Column {
+        val navigationBarBackgroundColor = OudsTheme.colorScheme.background.secondary //TODO Temporary color. Waiting for Material colors from Maxime.
+        AnimatedVisibility(
+            visible = visible,
+            enter = fadeIn(tween(100)),
+            exit = fadeOut(tween(100))
+        ) {
+            val items = BottomBarItem.entries.toTypedArray()
+            NavigationBar(
+                modifier = Modifier.consumeWindowInsets(WindowInsets.navigationBars),
+                containerColor = navigationBarBackgroundColor,
+                content = {
+                    items.forEach { item ->
+                        NavigationBarItem(
+                            selected = currentRoute == item.route,
+                            icon = {
+                                Icon(painterResource(item.iconRes), null)
+                            },
+                            label = {
+                                Text(
+                                    text = stringResource(item.titleRes),
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis,
+                                )
+                            },
+                            onClick = { navigateToRoute(item.route) }
                         )
-                    },
-                    onClick = { navigateToRoute(item.route) }
-                )
-            }
-
+                    }
+                }
+            )
         }
-    )
+        val systemNavigationBarBackgroundColor by animateColorAsState(if (visible) navigationBarBackgroundColor else MaterialTheme.colorScheme.surface)
+        Spacer(
+            modifier = Modifier
+                .background(systemNavigationBarBackgroundColor)
+                .windowInsetsBottomHeight(WindowInsets.navigationBars)
+                .fillMaxWidth()
+        )
+    }
 }
 
 enum class BottomBarItem(
@@ -67,5 +99,5 @@ enum class BottomBarItem(
 @UiModePreviews.Default
 @Composable
 private fun PreviewBottomBar() = OudsPreview {
-    BottomBar(currentRoute = "") {}
+    BottomBar(currentRoute = "", navigateToRoute = {})
 }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt
@@ -21,14 +21,11 @@ import androidx.activity.SystemBarStyle
 import androidx.activity.compose.LocalActivity
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatDelegate
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -88,7 +85,10 @@ private fun MainScreen(themes: List<OudsThemeContract>, userThemeName: String?,
 
     val isSystemInDarkTheme = isSystemInDarkTheme()
     val activity = LocalActivity.current as? ComponentActivity
-    activity?.enableEdgeToEdge(SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT) { isSystemInDarkTheme })
+    activity?.enableEdgeToEdge(
+        SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT) { isSystemInDarkTheme },
+        SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT) { isSystemInDarkTheme }
+    )
 
     var changeThemeDialogVisible by remember { mutableStateOf(false) }
 
@@ -111,18 +111,13 @@ private fun MainScreen(themes: List<OudsThemeContract>, userThemeName: String?,
                 )
             },
             bottomBar = {
-                AnimatedVisibility(
-                    visible = mainState.showBottomBar,
-                    enter = fadeIn(tween(100)),
-                    exit = fadeOut(tween(100))
-                ) {
-                    BottomBar(
-                        currentRoute = mainState.navigationState.currentRoute.orEmpty(),
-                        navigateToRoute = { route ->
-                            mainState.navigationState.navigateToBottomBarRoute(route)
-                        }
-                    )
-                }
+                BottomBar(
+                    currentRoute = mainState.navigationState.currentRoute.orEmpty(),
+                    navigateToRoute = { route ->
+                        mainState.navigationState.navigateToBottomBarRoute(route)
+                    },
+                    visible = mainState.showBottomBar
+                )
             }
         ) { innerPadding ->
             NavHost(