From b936b541329e3ce5a9edac084aa47d9924df8366 Mon Sep 17 00:00:00 2001 From: Harsh Shandilya Date: Fri, 14 Apr 2023 01:48:31 +0530 Subject: [PATCH] feat: rework system bar colors --- .../msfjarvis/claw/android/MainActivity.kt | 4 ++- .../msfjarvis/claw/android/ui/LobstersApp.kt | 25 ++----------------- .../ui/decorations/TransparentSystemBars.kt | 25 +++++++++++++++++++ .../claw/common/ui/decorations/ClawAppBar.kt | 7 +----- 4 files changed, 31 insertions(+), 30 deletions(-) create mode 100644 android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/TransparentSystemBars.kt diff --git a/android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt b/android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt index e211f36c..40824072 100644 --- a/android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt @@ -1,5 +1,5 @@ /* - * Copyright © 2021-2022 Harsh Shandilya. + * Copyright © 2021-2023 Harsh Shandilya. * Use of this source code is governed by an MIT-style * license that can be found in the LICENSE file or at * https://opensource.org/licenses/MIT. @@ -12,6 +12,7 @@ import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen +import androidx.core.view.WindowCompat import com.deliveryhero.whetstone.Whetstone import com.deliveryhero.whetstone.activity.ContributesActivityInjector import dev.msfjarvis.claw.android.ui.LobstersApp @@ -30,6 +31,7 @@ class MainActivity : ComponentActivity() { super.onCreate(savedInstanceState) installSplashScreen() Whetstone.inject(this) + WindowCompat.setDecorFitsSystemWindows(window, false) setContent { LobstersApp( urlLauncher = urlLauncher, diff --git a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt index 2fc8929c..7823d06d 100644 --- a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt @@ -11,18 +11,14 @@ import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.SideEffect import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier -import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.res.stringResource @@ -38,10 +34,10 @@ import androidx.navigation.navArgument import androidx.navigation.navDeepLink import androidx.paging.compose.collectAsLazyPagingItems import com.deliveryhero.whetstone.compose.injectedViewModel -import com.google.accompanist.systemuicontroller.rememberSystemUiController import dev.msfjarvis.claw.android.R import dev.msfjarvis.claw.android.ui.decorations.ClawNavigationBar import dev.msfjarvis.claw.android.ui.decorations.NavigationItem +import dev.msfjarvis.claw.android.ui.decorations.TransparentSystemBars import dev.msfjarvis.claw.android.ui.lists.DatabasePosts import dev.msfjarvis.claw.android.ui.lists.NetworkPosts import dev.msfjarvis.claw.android.ui.navigation.Destinations @@ -52,7 +48,6 @@ import dev.msfjarvis.claw.common.comments.HTMLConverter import dev.msfjarvis.claw.common.res.ClawIcons import dev.msfjarvis.claw.common.theme.LobstersTheme import dev.msfjarvis.claw.common.ui.decorations.ClawAppBar -import dev.msfjarvis.claw.common.ui.surfaceColorAtNavigationBarElevation import dev.msfjarvis.claw.common.urllauncher.UrlLauncher import dev.msfjarvis.claw.common.user.UserProfile import kotlinx.collections.immutable.persistentListOf @@ -71,7 +66,6 @@ fun LobstersApp( modifier: Modifier = Modifier, viewModel: ClawViewModel = injectedViewModel(), ) { - val systemUiController = rememberSystemUiController() val hottestListState = rememberLazyListState() val newestListState = rememberLazyListState() val savedListState = rememberLazyListState() @@ -90,9 +84,6 @@ fun LobstersApp( dynamicColor = true, providedValues = arrayOf(LocalUriHandler provides urlLauncher), ) { - val currentUiMode = LocalConfiguration.current.uiMode - val systemBarsColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation() - val backgroundColor = MaterialTheme.colorScheme.background val navItems = persistentListOf( NavigationItem( @@ -121,23 +112,11 @@ fun LobstersApp( }, ) - SideEffect { systemUiController.setStatusBarColor(color = systemBarsColor) } - - // Track UI mode as a key to force a navbar color update when dark theme is toggled - LaunchedEffect(currentDestination, currentUiMode) { - val color = - if (navItems.none { item -> item.route == currentDestination }) { - backgroundColor - } else { - systemBarsColor - } - systemUiController.setNavigationBarColor(color = color) - } + TransparentSystemBars() Scaffold( topBar = { ClawAppBar( - backgroundColor = systemBarsColor, navigationIcon = { if (navItems.none { it.route == currentDestination }) { IconButton( diff --git a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/TransparentSystemBars.kt b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/TransparentSystemBars.kt new file mode 100644 index 00000000..fa4d7123 --- /dev/null +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/TransparentSystemBars.kt @@ -0,0 +1,25 @@ +/* + * Copyright © 2023 Harsh Shandilya. + * Use of this source code is governed by an MIT-style + * license that can be found in the LICENSE file or at + * https://opensource.org/licenses/MIT. + */ +package dev.msfjarvis.claw.android.ui.decorations + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.DisposableEffect +import androidx.compose.ui.graphics.Color +import com.google.accompanist.systemuicontroller.rememberSystemUiController + +@Composable +fun TransparentSystemBars() { + val systemUiController = rememberSystemUiController() + val useDarkIcons = !isSystemInDarkTheme() + + DisposableEffect(systemUiController, useDarkIcons) { + systemUiController.setSystemBarsColor(color = Color.Transparent, darkIcons = useDarkIcons) + + onDispose {} + } +} diff --git a/common/src/main/kotlin/dev/msfjarvis/claw/common/ui/decorations/ClawAppBar.kt b/common/src/main/kotlin/dev/msfjarvis/claw/common/ui/decorations/ClawAppBar.kt index 23887d4c..78cd6e99 100644 --- a/common/src/main/kotlin/dev/msfjarvis/claw/common/ui/decorations/ClawAppBar.kt +++ b/common/src/main/kotlin/dev/msfjarvis/claw/common/ui/decorations/ClawAppBar.kt @@ -8,25 +8,21 @@ package dev.msfjarvis.claw.common.ui.decorations import androidx.compose.foundation.layout.RowScope import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.shadow -import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import dev.msfjarvis.claw.common.theme.LobstersTheme import dev.msfjarvis.claw.common.ui.preview.DevicePreviews import dev.msfjarvis.claw.common.ui.preview.ThemePreviews -import dev.msfjarvis.claw.common.ui.surfaceColorAtNavigationBarElevation @Composable @OptIn(ExperimentalMaterial3Api::class) fun ClawAppBar( - backgroundColor: Color, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, title: @Composable () -> Unit = {}, @@ -35,7 +31,7 @@ fun ClawAppBar( TopAppBar( title = title, modifier = modifier.shadow(8.dp), - colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = backgroundColor), + colors = TopAppBarDefaults.smallTopAppBarColors(), navigationIcon = navigationIcon, actions = actions, ) @@ -47,7 +43,6 @@ fun ClawAppBar( fun ClawAppBarPreview() { LobstersTheme { ClawAppBar( - backgroundColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation(), title = { Text("Claw", fontWeight = FontWeight.Bold) }, ) }