Refine backgrounds and navigation colors

Change-Id: I9fd863cc608f21078ab78c39c2c3d227aedbac7c
pull/242/head
Alex Vanyo 3 years ago
parent 8c11769622
commit 738210166a

@ -44,6 +44,7 @@ import androidx.compose.ui.semantics.testTagsAsResourceId
import androidx.navigation.NavDestination import androidx.navigation.NavDestination
import androidx.navigation.NavDestination.Companion.hierarchy import androidx.navigation.NavDestination.Companion.hierarchy
import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaBackground import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaBackground
import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaGradientBackground
import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationBar import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationBar
import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationBarItem import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationBarItem
import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationRail import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationRail
@ -51,6 +52,8 @@ import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavig
import com.google.samples.apps.nowinandroid.core.designsystem.icon.Icon.DrawableResourceIcon import com.google.samples.apps.nowinandroid.core.designsystem.icon.Icon.DrawableResourceIcon
import com.google.samples.apps.nowinandroid.core.designsystem.icon.Icon.ImageVectorIcon import com.google.samples.apps.nowinandroid.core.designsystem.icon.Icon.ImageVectorIcon
import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
import com.google.samples.apps.nowinandroid.core.navigation.NiaNavigationDestination
import com.google.samples.apps.nowinandroid.feature.foryou.navigation.ForYouDestination
import com.google.samples.apps.nowinandroid.navigation.NiaNavHost import com.google.samples.apps.nowinandroid.navigation.NiaNavHost
import com.google.samples.apps.nowinandroid.navigation.TopLevelDestination import com.google.samples.apps.nowinandroid.navigation.TopLevelDestination
@ -65,7 +68,13 @@ fun NiaApp(
appState: NiaAppState = rememberNiaAppState(windowSizeClass) appState: NiaAppState = rememberNiaAppState(windowSizeClass)
) { ) {
NiaTheme { NiaTheme {
NiaBackground { val background: @Composable (@Composable () -> Unit) -> Unit =
when (appState.currentDestination?.route) {
ForYouDestination.route -> { content -> NiaGradientBackground(content = content) }
else -> { content -> NiaBackground(content = content) }
}
background {
Scaffold( Scaffold(
modifier = Modifier.semantics { modifier = Modifier.semantics {
testTagsAsResourceId = true testTagsAsResourceId = true

@ -16,6 +16,7 @@
package com.google.samples.apps.nowinandroid.core.designsystem.component package com.google.samples.apps.nowinandroid.core.designsystem.component
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults import androidx.compose.material3.FilterChipDefaults
@ -63,6 +64,7 @@ fun NiaFilterChip(
contentDescription = null contentDescription = null
) )
}, },
shape = CircleShape,
border = FilterChipDefaults.filterChipBorder( border = FilterChipDefaults.filterChipBorder(
borderColor = MaterialTheme.colorScheme.onBackground, borderColor = MaterialTheme.colorScheme.onBackground,
selectedBorderColor = MaterialTheme.colorScheme.onBackground, selectedBorderColor = MaterialTheme.colorScheme.onBackground,

@ -88,7 +88,6 @@ fun NiaNavigationBar(
) { ) {
NavigationBar( NavigationBar(
modifier = modifier, modifier = modifier,
containerColor = NiaNavigationDefaults.NavigationContainerColor,
contentColor = NiaNavigationDefaults.navigationContentColor(), contentColor = NiaNavigationDefaults.navigationContentColor(),
tonalElevation = 0.dp, tonalElevation = 0.dp,
content = content content = content
@ -155,7 +154,7 @@ fun NiaNavigationRail(
) { ) {
NavigationRail( NavigationRail(
modifier = modifier, modifier = modifier,
containerColor = NiaNavigationDefaults.NavigationContainerColor, containerColor = Color.Transparent,
contentColor = NiaNavigationDefaults.navigationContentColor(), contentColor = NiaNavigationDefaults.navigationContentColor(),
header = header, header = header,
content = content content = content
@ -166,7 +165,6 @@ fun NiaNavigationRail(
* Now in Android navigation default values. * Now in Android navigation default values.
*/ */
object NiaNavigationDefaults { object NiaNavigationDefaults {
val NavigationContainerColor = Color.Transparent
@Composable @Composable
fun navigationContentColor() = MaterialTheme.colorScheme.onSurfaceVariant fun navigationContentColor() = MaterialTheme.colorScheme.onSurfaceVariant
@Composable @Composable

@ -69,44 +69,42 @@ fun BookmarksScreen(
removeFromBookmarks: (String) -> Unit, removeFromBookmarks: (String) -> Unit,
modifier: Modifier = Modifier modifier: Modifier = Modifier
) { ) {
NiaGradientBackground { Scaffold(
Scaffold( topBar = {
topBar = { NiaTopAppBar(
NiaTopAppBar( titleRes = R.string.top_app_bar_title_saved,
titleRes = R.string.top_app_bar_title_saved, actionIcon = NiaIcons.AccountCircle,
actionIcon = NiaIcons.AccountCircle, actionIconContentDescription = stringResource(
actionIconContentDescription = stringResource( id = R.string.top_app_bar_action_menu
id = R.string.top_app_bar_action_menu ),
), colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = Color.Transparent
containerColor = Color.Transparent
)
)
},
containerColor = Color.Transparent,
contentWindowInsets = WindowInsets(0, 0, 0, 0)
) { innerPadding ->
LazyVerticalGrid(
columns = Adaptive(300.dp),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(32.dp),
verticalArrangement = Arrangement.spacedBy(24.dp),
modifier = modifier
.fillMaxSize()
.testTag("bookmarks:feed")
.padding(innerPadding)
.consumedWindowInsets(innerPadding)
) {
newsFeed(
feedState = feedState,
onNewsResourcesCheckedChanged = { id, _ -> removeFromBookmarks(id) },
showLoadingUIIfLoading = true,
loadingContentDescription = R.string.saved_loading
) )
)
},
containerColor = Color.Transparent,
contentWindowInsets = WindowInsets(0, 0, 0, 0)
) { innerPadding ->
LazyVerticalGrid(
columns = Adaptive(300.dp),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(32.dp),
verticalArrangement = Arrangement.spacedBy(24.dp),
modifier = modifier
.fillMaxSize()
.testTag("bookmarks:feed")
.padding(innerPadding)
.consumedWindowInsets(innerPadding)
) {
newsFeed(
feedState = feedState,
onNewsResourcesCheckedChanged = { id, _ -> removeFromBookmarks(id) },
showLoadingUIIfLoading = true,
loadingContentDescription = R.string.saved_loading
)
item(span = { GridItemSpan(maxLineSpan) }) { item(span = { GridItemSpan(maxLineSpan) }) {
Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing)) Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
}
} }
} }
} }

@ -124,95 +124,93 @@ fun ForYouScreen(
onNewsResourcesCheckedChanged: (String, Boolean) -> Unit, onNewsResourcesCheckedChanged: (String, Boolean) -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
NiaGradientBackground { Scaffold(
Scaffold( topBar = {
topBar = { NiaTopAppBar(
NiaTopAppBar( titleRes = R.string.top_app_bar_title,
titleRes = R.string.top_app_bar_title, actionIcon = NiaIcons.AccountCircle,
actionIcon = NiaIcons.AccountCircle, actionIconContentDescription = stringResource(
actionIconContentDescription = stringResource( id = R.string.for_you_top_app_bar_action_my_account
id = R.string.for_you_top_app_bar_action_my_account ),
), colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = Color.Transparent
containerColor = Color.Transparent
)
) )
}, )
containerColor = Color.Transparent, },
contentWindowInsets = WindowInsets(0, 0, 0, 0) containerColor = Color.Transparent,
) { innerPadding -> contentWindowInsets = WindowInsets(0, 0, 0, 0)
// Workaround to call Activity.reportFullyDrawn from Jetpack Compose. ) { innerPadding ->
// This code should be called when the UI is ready for use // Workaround to call Activity.reportFullyDrawn from Jetpack Compose.
// and relates to Time To Full Display. // This code should be called when the UI is ready for use
val interestsLoaded = // and relates to Time To Full Display.
interestsSelectionState !is ForYouInterestsSelectionUiState.Loading val interestsLoaded =
val feedLoaded = feedState !is NewsFeedUiState.Loading interestsSelectionState !is ForYouInterestsSelectionUiState.Loading
val feedLoaded = feedState !is NewsFeedUiState.Loading
if (interestsLoaded && feedLoaded) { if (interestsLoaded && feedLoaded) {
val localView = LocalView.current val localView = LocalView.current
// We use Unit to call reportFullyDrawn only on the first recomposition, // We use Unit to call reportFullyDrawn only on the first recomposition,
// however it will be called again if this composable goes out of scope. // however it will be called again if this composable goes out of scope.
// Activity.reportFullyDrawn() has its own check for this // Activity.reportFullyDrawn() has its own check for this
// and is safe to call multiple times though. // and is safe to call multiple times though.
LaunchedEffect(Unit) { LaunchedEffect(Unit) {
// We're leveraging the fact, that the current view is directly set as content of Activity. // We're leveraging the fact, that the current view is directly set as content of Activity.
val activity = localView.context as? Activity ?: return@LaunchedEffect val activity = localView.context as? Activity ?: return@LaunchedEffect
// To be sure not to call in the middle of a frame draw. // To be sure not to call in the middle of a frame draw.
localView.doOnPreDraw { activity.reportFullyDrawn() } localView.doOnPreDraw { activity.reportFullyDrawn() }
}
} }
}
val tag = "forYou:feed" val tag = "forYou:feed"
val lazyGridState = rememberLazyGridState() val lazyGridState = rememberLazyGridState()
TrackScrollJank(scrollableState = lazyGridState, stateName = tag) TrackScrollJank(scrollableState = lazyGridState, stateName = tag)
LazyVerticalGrid( LazyVerticalGrid(
columns = Adaptive(300.dp), columns = Adaptive(300.dp),
contentPadding = PaddingValues(16.dp), contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp), horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(24.dp), verticalArrangement = Arrangement.spacedBy(24.dp),
modifier = modifier modifier = modifier
.padding(innerPadding) .padding(innerPadding)
.consumedWindowInsets(innerPadding) .consumedWindowInsets(innerPadding)
.fillMaxSize() .fillMaxSize()
.testTag("forYou:feed"), .testTag("forYou:feed"),
state = lazyGridState state = lazyGridState
) { ) {
interestsSelection( interestsSelection(
interestsSelectionState = interestsSelectionState, interestsSelectionState = interestsSelectionState,
onAuthorCheckedChanged = onAuthorCheckedChanged, onAuthorCheckedChanged = onAuthorCheckedChanged,
onTopicCheckedChanged = onTopicCheckedChanged, onTopicCheckedChanged = onTopicCheckedChanged,
saveFollowedTopics = saveFollowedTopics, saveFollowedTopics = saveFollowedTopics,
// Custom LayoutModifier to remove the enforced parent 16.dp contentPadding // Custom LayoutModifier to remove the enforced parent 16.dp contentPadding
// from the LazyVerticalGrid and enable edge-to-edge scrolling for this section // from the LazyVerticalGrid and enable edge-to-edge scrolling for this section
interestsItemModifier = Modifier.layout { measurable, constraints -> interestsItemModifier = Modifier.layout { measurable, constraints ->
val placeable = measurable.measure( val placeable = measurable.measure(
constraints.copy( constraints.copy(
maxWidth = constraints.maxWidth + 32.dp.roundToPx() maxWidth = constraints.maxWidth + 32.dp.roundToPx()
)
) )
layout(placeable.width, placeable.height) { )
placeable.place(0, 0) layout(placeable.width, placeable.height) {
} placeable.place(0, 0)
} }
) }
)
newsFeed( newsFeed(
feedState = feedState, feedState = feedState,
// Avoid showing a second loading wheel if we already are for the interests // Avoid showing a second loading wheel if we already are for the interests
// selection // selection
showLoadingUIIfLoading = showLoadingUIIfLoading =
interestsSelectionState !is ForYouInterestsSelectionUiState.Loading, interestsSelectionState !is ForYouInterestsSelectionUiState.Loading,
onNewsResourcesCheckedChanged = onNewsResourcesCheckedChanged, onNewsResourcesCheckedChanged = onNewsResourcesCheckedChanged,
loadingContentDescription = R.string.for_you_loading loadingContentDescription = R.string.for_you_loading
) )
item(span = { GridItemSpan(maxLineSpan) }) { item(span = { GridItemSpan(maxLineSpan) }) {
Column { Column {
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing)) Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
}
} }
} }
} }

Loading…
Cancel
Save