From 97beaccc43b4f065771630a11f928bc3515fd259 Mon Sep 17 00:00:00 2001 From: Yang Date: Mon, 16 Sep 2024 23:26:07 +1000 Subject: [PATCH] Set navigation bar color for non-gesture mode with `enableEdgeToEdge`. Fix insets for non-gesture mode. --- .../kstreamlined/android/KSActivity.kt | 48 ++++++++++++------- .../contentviewer/ContentViewerScreen.kt | 2 + .../android/feature/home/HomeScreen.kt | 4 +- .../KotlinWeeklyIssueScreen.kt | 2 + .../savedforlater/SavedForLaterScreen.kt | 2 + .../TalkingKotlinEpisodeScreen.kt | 4 ++ 6 files changed, 45 insertions(+), 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 index 0c15598c..90c35117 100644 --- 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/android/feature/content-viewer/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/contentviewer/ContentViewerScreen.kt b/android/feature/content-viewer/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/contentviewer/ContentViewerScreen.kt index f4752412..39ef11fd 100644 --- a/android/feature/content-viewer/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/contentviewer/ContentViewerScreen.kt +++ b/android/feature/content-viewer/src/main/kotlin/io/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/android/feature/home/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/home/HomeScreen.kt b/android/feature/home/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/home/HomeScreen.kt index b1c69ded..3372d273 100644 --- a/android/feature/home/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/home/HomeScreen.kt +++ b/android/feature/home/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/android/feature/kotlin-weekly-issue/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/kotlinweeklyissue/KotlinWeeklyIssueScreen.kt b/android/feature/kotlin-weekly-issue/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/kotlinweeklyissue/KotlinWeeklyIssueScreen.kt index b7a7ad7d..57b31124 100644 --- a/android/feature/kotlin-weekly-issue/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/kotlinweeklyissue/KotlinWeeklyIssueScreen.kt +++ b/android/feature/kotlin-weekly-issue/src/main/kotlin/io/github/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/android/feature/saved-for-later/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/savedforlater/SavedForLaterScreen.kt b/android/feature/saved-for-later/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/savedforlater/SavedForLaterScreen.kt index 8d20feb1..03b00380 100644 --- a/android/feature/saved-for-later/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/savedforlater/SavedForLaterScreen.kt +++ b/android/feature/saved-for-later/src/main/kotlin/io/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/android/feature/talking-kotlin-episode/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt b/android/feature/talking-kotlin-episode/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt index 4e450582..9e8f48ef 100644 --- a/android/feature/talking-kotlin-episode/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/talkingkotlinepisode/TalkingKotlinEpisodeScreen.kt +++ b/android/feature/talking-kotlin-episode/src/main/kotlin/io/github/reactivecircus/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(