Set navigation bar color for non-gesture mode with enableEdgeToEdge…

…. Fix insets for non-gesture mode.
ReactiveCircus · Sep 16, 2024 · 97beacc · 97beacc
1 parent 12ce9ea
commit 97beacc
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 17 deletions.
diff --git a/android/app/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/KSActivity.kt b/android/app/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/KSActivity.kt
@@ -5,6 +5,7 @@ import android.os.Bundle
 import android.os.Parcelable
 import android.provider.Settings
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.BackHandler
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
@@ -15,15 +16,14 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.semantics.semantics
@@ -37,7 +37,7 @@ import io.github.reactivecircus.kstreamlined.android.foundation.designsystem.fou
 import io.github.reactivecircus.kstreamlined.kmp.model.feed.FeedItem
 import kotlinx.parcelize.Parcelize
 
-@OptIn(ExperimentalComposeUiApi::class, ExperimentalSharedTransitionApi::class)
+@OptIn(ExperimentalSharedTransitionApi::class)
 @AndroidEntryPoint
 class KSActivity : ComponentActivity() {
 
@@ -50,18 +50,7 @@ class KSActivity : ComponentActivity() {
 
         setContent {
             KSTheme {
-                val darkTheme = isSystemInDarkTheme()
-                val context = LocalContext.current
-                val backgroundColor = KSTheme.colorScheme.background
-                DisposableEffect(darkTheme, context) {
-                    val navigationBarColor = when (SystemNavigationMode.of(context)) {
-                        SystemNavigationMode.Gesture -> Color.Transparent
-                        else -> backgroundColor
-                    }
-                    @Suppress("DEPRECATION")
-                    window.navigationBarColor = navigationBarColor.toArgb()
-                    onDispose { }
-                }
+                NavigationBarStyleEffect()
 
                 var navDestination: NavDestination by rememberSaveable {
                     mutableStateOf(
@@ -103,6 +92,7 @@ class KSActivity : ComponentActivity() {
                                                     issueNumber = item.issueNumber,
                                                 )
                                             }
+
                                             is FeedItem.TalkingKotlin -> {
                                                 NavDestination.TalkingKotlinEpisode(
                                                     boundsKey = "Bounds/$source/${item.id}",
@@ -111,6 +101,7 @@ class KSActivity : ComponentActivity() {
                                                     id = item.id,
                                                 )
                                             }
+
                                             else -> {
                                                 NavDestination.ContentViewer(
                                                     boundsKey = "Bounds/$source/${item.id}",
@@ -205,7 +196,32 @@ private sealed interface NavDestination : Parcelable {
     ) : NavDestination
 }
 
-enum class SystemNavigationMode {
+@Composable
+private fun ComponentActivity.NavigationBarStyleEffect() {
+    val darkTheme = isSystemInDarkTheme()
+    val context = LocalContext.current
+    val backgroundColor = KSTheme.colorScheme.background
+    DisposableEffect(darkTheme, context) {
+        if (SystemNavigationMode.of(context) != SystemNavigationMode.Gesture) {
+            val navigationBarColor = backgroundColor.toArgb()
+            enableEdgeToEdge(
+                navigationBarStyle = if (!darkTheme) {
+                    SystemBarStyle.light(
+                        navigationBarColor,
+                        navigationBarColor,
+                    )
+                } else {
+                    SystemBarStyle.dark(
+                        navigationBarColor,
+                    )
+                },
+            )
+        }
+        onDispose { }
+    }
+}
+
+private enum class SystemNavigationMode {
     ThreeButton,
     TwoButton,
     Gesture;

diff --git a/...o/github/reactivecircus/kstreamlined/android/feature/contentviewer/ContentViewerScreen.kt b/...o/github/reactivecircus/kstreamlined/android/feature/contentviewer/ContentViewerScreen.kt
@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
@@ -80,6 +81,7 @@ public fun ContentViewerScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
+            .navigationBarsPadding()
             .background(KSTheme.colorScheme.background)
             .sharedBounds(
                 rememberSharedContentState(key = boundsKey),

diff --git a/.../src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/home/HomeScreen.kt b/.../src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/home/HomeScreen.kt
@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
@@ -97,6 +98,7 @@ internal fun HomeScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
+            .navigationBarsPadding()
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(
@@ -172,7 +174,7 @@ private fun ContentUi(
     modifier: Modifier = Modifier,
 ) = trace("FeedList") {
     Box(
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier.fillMaxSize().navigationBarsPadding(),
         contentAlignment = Alignment.TopCenter,
     ) {
         LazyColumn(

diff --git a/.../reactivecircus/kstreamlined/android/feature/kotlinweeklyissue/KotlinWeeklyIssueScreen.kt b/.../reactivecircus/kstreamlined/android/feature/kotlinweeklyissue/KotlinWeeklyIssueScreen.kt
@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
@@ -121,6 +122,7 @@ internal fun KotlinWeeklyIssueScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
+            .navigationBarsPadding()
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(

diff --git a/...o/github/reactivecircus/kstreamlined/android/feature/savedforlater/SavedForLaterScreen.kt b/...o/github/reactivecircus/kstreamlined/android/feature/savedforlater/SavedForLaterScreen.kt
@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
@@ -82,6 +83,7 @@ internal fun SavedForLaterScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
+            .navigationBarsPadding()
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(

diff --git a/...ivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt b/...ivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt
@@ -13,15 +13,18 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -118,6 +121,7 @@ internal fun TalkingKotlinEpisodeScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
+            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(