android: improve propagation of surface color

This commit is contained in:
Harsh Shandilya 2022-02-06 21:29:53 +05:30
parent e15244b5db
commit 4a3d296041
No known key found for this signature in database
GPG key ID: 366D7BBAD1031E80
4 changed files with 36 additions and 9 deletions

View file

@ -6,7 +6,6 @@ import android.os.Bundle
import androidx.activity.ComponentActivity import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent import androidx.activity.compose.setContent
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
import androidx.core.view.WindowCompat
import dagger.hilt.android.AndroidEntryPoint import dagger.hilt.android.AndroidEntryPoint
import dev.msfjarvis.claw.android.ui.LobstersApp import dev.msfjarvis.claw.android.ui.LobstersApp
import dev.msfjarvis.claw.common.comments.HTMLConverter import dev.msfjarvis.claw.common.comments.HTMLConverter
@ -23,7 +22,6 @@ class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
installSplashScreen() installSplashScreen()
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent { setContent {
LobstersApp( LobstersApp(
urlLauncher = urlLauncher, urlLauncher = urlLauncher,

View file

@ -12,7 +12,6 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.platform.LocalUriHandler
@ -69,11 +68,11 @@ fun LobstersApp(
colorScheme = decideColorScheme(LocalContext.current), colorScheme = decideColorScheme(LocalContext.current),
) { ) {
ProvideWindowInsets { ProvideWindowInsets {
val statusBarColor = MaterialTheme.colorScheme.background val systemBarsColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation()
SideEffect { SideEffect {
systemUiController.setStatusBarColor(color = statusBarColor) systemUiController.setStatusBarColor(color = systemBarsColor)
systemUiController.setNavigationBarColor(color = Color.Transparent) systemUiController.setNavigationBarColor(color = systemBarsColor)
} }
val navItems = val navItems =
@ -91,19 +90,22 @@ fun LobstersApp(
) )
Scaffold( Scaffold(
topBar = { ClawAppBar(modifier = Modifier.statusBarsPadding()) }, topBar = {
ClawAppBar(
backgroundColor = systemBarsColor,
modifier = Modifier.statusBarsPadding(),
)
},
floatingActionButton = { floatingActionButton = {
ClawFab( ClawFab(
isFabVisible = isFabVisible && currentDestination == Destinations.Hottest.getRoute(), isFabVisible = isFabVisible && currentDestination == Destinations.Hottest.getRoute(),
listState = networkListState, listState = networkListState,
modifier = Modifier.navigationBarsPadding(),
) )
}, },
bottomBar = { bottomBar = {
ClawNavigationBar( ClawNavigationBar(
navController = navController, navController = navController,
items = navItems, items = navItems,
modifier = Modifier.navigationBarsPadding(),
) )
}, },
) { ) {

View file

@ -2,14 +2,17 @@ package dev.msfjarvis.claw.android.ui.decorations
import androidx.compose.material3.SmallTopAppBar import androidx.compose.material3.SmallTopAppBar
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import dev.msfjarvis.claw.android.R import dev.msfjarvis.claw.android.R
@Composable @Composable
fun ClawAppBar( fun ClawAppBar(
backgroundColor: Color,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
SmallTopAppBar( SmallTopAppBar(
@ -20,5 +23,6 @@ fun ClawAppBar(
) )
}, },
modifier = modifier, modifier = modifier,
colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = backgroundColor),
) )
} }

View file

@ -4,6 +4,7 @@ import android.content.Context
import android.os.Build import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.ColorScheme import androidx.compose.material3.ColorScheme
import androidx.compose.material3.LocalAbsoluteTonalElevation
import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -11,8 +12,11 @@ import androidx.compose.runtime.State
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.geometry.Offset 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.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController import androidx.navigation.NavController
import dev.msfjarvis.claw.android.ui.navigation.Destinations import dev.msfjarvis.claw.android.ui.navigation.Destinations
import dev.msfjarvis.claw.android.viewmodel.ClawViewModel 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.theme.LightThemeColors
import dev.msfjarvis.claw.common.urllauncher.UrlLauncher import dev.msfjarvis.claw.common.urllauncher.UrlLauncher
import dev.msfjarvis.claw.database.local.SavedPost import dev.msfjarvis.claw.database.local.SavedPost
import kotlin.math.ln
// The destination needs to be tracked like this rather than used directly since // The destination needs to be tracked like this rather than used directly since
// `NavController#currentDestination` is not a Composable state. // `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)
}