From 4a3d29604192fdc059da64381a0fdc29433c0d13 Mon Sep 17 00:00:00 2001 From: Harsh Shandilya Date: Sun, 6 Feb 2022 21:29:53 +0530 Subject: [PATCH] android: improve propagation of surface color --- .../msfjarvis/claw/android/MainActivity.kt | 2 -- .../msfjarvis/claw/android/ui/LobstersApp.kt | 16 +++++++------ .../claw/android/ui/decorations/ClawAppBar.kt | 4 ++++ .../dev/msfjarvis/claw/android/ui/ext.kt | 23 +++++++++++++++++++ 4 files changed, 36 insertions(+), 9 deletions(-) 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 defbd7dd..cea790dc 100644 --- a/android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt @@ -6,7 +6,6 @@ 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 dagger.hilt.android.AndroidEntryPoint import dev.msfjarvis.claw.android.ui.LobstersApp import dev.msfjarvis.claw.common.comments.HTMLConverter @@ -23,7 +22,6 @@ class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) installSplashScreen() - 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 3389aa11..0cd565bb 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 @@ -12,7 +12,6 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalUriHandler @@ -69,11 +68,11 @@ fun LobstersApp( colorScheme = decideColorScheme(LocalContext.current), ) { ProvideWindowInsets { - val statusBarColor = MaterialTheme.colorScheme.background + val systemBarsColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation() SideEffect { - systemUiController.setStatusBarColor(color = statusBarColor) - systemUiController.setNavigationBarColor(color = Color.Transparent) + systemUiController.setStatusBarColor(color = systemBarsColor) + systemUiController.setNavigationBarColor(color = systemBarsColor) } val navItems = @@ -91,19 +90,22 @@ fun LobstersApp( ) Scaffold( - topBar = { ClawAppBar(modifier = Modifier.statusBarsPadding()) }, + topBar = { + ClawAppBar( + backgroundColor = systemBarsColor, + modifier = Modifier.statusBarsPadding(), + ) + }, floatingActionButton = { ClawFab( isFabVisible = isFabVisible && currentDestination == Destinations.Hottest.getRoute(), listState = networkListState, - modifier = Modifier.navigationBarsPadding(), ) }, bottomBar = { ClawNavigationBar( navController = navController, items = navItems, - modifier = Modifier.navigationBarsPadding(), ) }, ) { diff --git a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/ClawAppBar.kt b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/ClawAppBar.kt index 6c6521ca..648fbda7 100644 --- a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/ClawAppBar.kt +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/ClawAppBar.kt @@ -2,14 +2,17 @@ package dev.msfjarvis.claw.android.ui.decorations import androidx.compose.material3.SmallTopAppBar import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import dev.msfjarvis.claw.android.R @Composable fun ClawAppBar( + backgroundColor: Color, modifier: Modifier = Modifier, ) { SmallTopAppBar( @@ -20,5 +23,6 @@ fun ClawAppBar( ) }, modifier = modifier, + colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = backgroundColor), ) } diff --git a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/ext.kt b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/ext.kt index fee22060..40096493 100644 --- a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/ext.kt +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/ext.kt @@ -4,6 +4,7 @@ import android.content.Context import android.os.Build import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.ColorScheme +import androidx.compose.material3.LocalAbsoluteTonalElevation import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.runtime.Composable @@ -11,8 +12,11 @@ import androidx.compose.runtime.State import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.compositeOver import androidx.compose.ui.input.nestedscroll.NestedScrollConnection import androidx.compose.ui.input.nestedscroll.NestedScrollSource +import androidx.compose.ui.unit.dp import androidx.navigation.NavController import dev.msfjarvis.claw.android.ui.navigation.Destinations import dev.msfjarvis.claw.android.viewmodel.ClawViewModel @@ -21,6 +25,7 @@ import dev.msfjarvis.claw.common.theme.DarkThemeColors import dev.msfjarvis.claw.common.theme.LightThemeColors import dev.msfjarvis.claw.common.urllauncher.UrlLauncher import dev.msfjarvis.claw.database.local.SavedPost +import kotlin.math.ln // The destination needs to be tracked like this rather than used directly since // `NavController#currentDestination` is not a Composable state. @@ -99,3 +104,21 @@ fun rememberNestedScrollConnection(setVisibility: (Boolean) -> Unit): NestedScro } } } + +/** + * Returns the [ColorScheme.surface] color with an alpha of the [ColorScheme.primary] color overlaid + * on top of it. Computes the surface tonal color at different elevation levels e.g. surface1 + * through surface5. + * + * Stolen from AndroidX, keep in sync when upgrading Compose. This version is hard-coded to + * replicate the logic used by the Material3 NavigationBar to determine its surface color. + * https://github.com/androidx/androidx/blob/74d3510b608c3cc26b9cf9be8d15a6a6c26192c2/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt#L453-L466 + */ +@Composable +fun ColorScheme.surfaceColorAtNavigationBarElevation(): Color { + // Absolute tonal elevation + NavigationBarTokens.ContainerElevation + val elevation = LocalAbsoluteTonalElevation.current + 3.0.dp + if (elevation == 0.dp) return surface + val alpha = ((4.5f * ln(elevation.value + 1)) + 2f) / 100f + return primary.copy(alpha = alpha).compositeOver(surface) +}