From 2fad9fd1e5c07ccfcb1fd7918f983d70b2d26671 Mon Sep 17 00:00:00 2001 From: Alex Vanyo Date: Thu, 15 Dec 2022 15:21:18 -0800 Subject: [PATCH 1/3] Fix background composable Change-Id: I548612191b0b99620777c3e2ad0ace56b228d27d --- .../samples/apps/nowinandroid/ui/NiaApp.kt | 178 ++++++++++-------- 1 file changed, 95 insertions(+), 83 deletions(-) diff --git a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt index 2c76222af..325ff2652 100644 --- a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt +++ b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt @@ -66,6 +66,7 @@ import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopAp 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.NiaIcons +import com.google.samples.apps.nowinandroid.core.designsystem.theme.LocalGradientColors import com.google.samples.apps.nowinandroid.feature.settings.R as settingsR import com.google.samples.apps.nowinandroid.feature.settings.SettingsDialog import com.google.samples.apps.nowinandroid.navigation.NiaNavHost @@ -86,101 +87,112 @@ fun NiaApp( windowSizeClass = windowSizeClass ), ) { - val background: @Composable (@Composable () -> Unit) -> Unit = - when (appState.currentTopLevelDestination) { - TopLevelDestination.FOR_YOU -> { - content -> - NiaGradientBackground(content = content) - } - else -> { content -> NiaBackground(content = content) } - } + val showGradientBackground = appState.currentTopLevelDestination == TopLevelDestination.FOR_YOU - background { - val snackbarHostState = remember { SnackbarHostState() } + NiaBackground { + NiaGradientBackground( + topColor = if (showGradientBackground) { + LocalGradientColors.current.top + } else { + Color.Unspecified + }, + bottomColor = if (showGradientBackground) { + LocalGradientColors.current.bottom + } else { + Color.Unspecified + }, + containerColor = if (showGradientBackground) { + LocalGradientColors.current.container + } else { + Color.Unspecified + }, + ) { + val snackbarHostState = remember { SnackbarHostState() } - val isOffline by appState.isOffline.collectAsStateWithLifecycle() + val isOffline by appState.isOffline.collectAsStateWithLifecycle() - // If user is not connected to the internet show a snack bar to inform them. - val notConnectedMessage = stringResource(R.string.not_connected) - LaunchedEffect(isOffline) { - if (isOffline) snackbarHostState.showSnackbar( - message = notConnectedMessage, - duration = Indefinite - ) - } - - if (appState.shouldShowSettingsDialog) { - SettingsDialog( - onDismiss = { appState.setShowSettingsDialog(false) } - ) - } + // If user is not connected to the internet show a snack bar to inform them. + val notConnectedMessage = stringResource(R.string.not_connected) + LaunchedEffect(isOffline) { + if (isOffline) snackbarHostState.showSnackbar( + message = notConnectedMessage, + duration = Indefinite + ) + } - Scaffold( - modifier = Modifier.semantics { - testTagsAsResourceId = true - }, - containerColor = Color.Transparent, - contentColor = MaterialTheme.colorScheme.onBackground, - contentWindowInsets = WindowInsets(0, 0, 0, 0), - snackbarHost = { SnackbarHost(snackbarHostState) }, - bottomBar = { - if (appState.shouldShowBottomBar) { - NiaBottomBar( - destinations = appState.topLevelDestinations, - onNavigateToDestination = appState::navigateToTopLevelDestination, - currentDestination = appState.currentDestination, - modifier = Modifier.testTag("NiaBottomBar") - ) - } + if (appState.shouldShowSettingsDialog) { + SettingsDialog( + onDismiss = { appState.setShowSettingsDialog(false) } + ) } - ) { padding -> - Row( - Modifier - .fillMaxSize() - .padding(padding) - .consumedWindowInsets(padding) - .windowInsetsPadding( - WindowInsets.safeDrawing.only( - WindowInsetsSides.Horizontal + + Scaffold( + modifier = Modifier.semantics { + testTagsAsResourceId = true + }, + containerColor = Color.Transparent, + contentColor = MaterialTheme.colorScheme.onBackground, + contentWindowInsets = WindowInsets(0, 0, 0, 0), + snackbarHost = { SnackbarHost(snackbarHostState) }, + bottomBar = { + if (appState.shouldShowBottomBar) { + NiaBottomBar( + destinations = appState.topLevelDestinations, + onNavigateToDestination = appState::navigateToTopLevelDestination, + currentDestination = appState.currentDestination, + modifier = Modifier.testTag("NiaBottomBar") ) - ) - ) { - if (appState.shouldShowNavRail) { - NiaNavRail( - destinations = appState.topLevelDestinations, - onNavigateToDestination = appState::navigateToTopLevelDestination, - currentDestination = appState.currentDestination, - modifier = Modifier - .testTag("NiaNavRail") - .safeDrawingPadding() - ) + } } + ) { padding -> + Row( + Modifier + .fillMaxSize() + .padding(padding) + .consumedWindowInsets(padding) + .windowInsetsPadding( + WindowInsets.safeDrawing.only( + WindowInsetsSides.Horizontal + ) + ) + ) { + if (appState.shouldShowNavRail) { + NiaNavRail( + destinations = appState.topLevelDestinations, + onNavigateToDestination = appState::navigateToTopLevelDestination, + currentDestination = appState.currentDestination, + modifier = Modifier + .testTag("NiaNavRail") + .safeDrawingPadding() + ) + } - Column(Modifier.fillMaxSize()) { - // Show the top app bar on top level destinations. - val destination = appState.currentTopLevelDestination - if (destination != null) { - NiaTopAppBar( - titleRes = destination.titleTextId, - actionIcon = NiaIcons.Settings, - actionIconContentDescription = stringResource( - id = settingsR.string.top_app_bar_action_icon_description - ), - colors = TopAppBarDefaults.centerAlignedTopAppBarColors( - containerColor = Color.Transparent - ), - onActionClick = { appState.setShowSettingsDialog(true) } + Column(Modifier.fillMaxSize()) { + // Show the top app bar on top level destinations. + val destination = appState.currentTopLevelDestination + if (destination != null) { + NiaTopAppBar( + titleRes = destination.titleTextId, + actionIcon = NiaIcons.Settings, + actionIconContentDescription = stringResource( + id = settingsR.string.top_app_bar_action_icon_description + ), + colors = TopAppBarDefaults.centerAlignedTopAppBarColors( + containerColor = Color.Transparent + ), + onActionClick = { appState.setShowSettingsDialog(true) } + ) + } + + NiaNavHost( + navController = appState.navController, + onBackClick = appState::onBackClick ) } - NiaNavHost( - navController = appState.navController, - onBackClick = appState::onBackClick - ) + // TODO: We may want to add padding or spacer when the snackbar is shown so that + // content doesn't display behind it. } - - // TODO: We may want to add padding or spacer when the snackbar is shown so that - // content doesn't display behind it. } } } From 088a1de92e6c2322285a41aad12feefb6150674e Mon Sep 17 00:00:00 2001 From: Alex Vanyo Date: Wed, 21 Dec 2022 10:41:58 -0800 Subject: [PATCH 2/3] Rename to shouldShowGradientBackground Change-Id: I79d4b43354f9da99d91fb21ee84fc084b374f4b8 --- .../com/google/samples/apps/nowinandroid/ui/NiaApp.kt | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt index 325ff2652..55be2dc55 100644 --- a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt +++ b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt @@ -87,21 +87,22 @@ fun NiaApp( windowSizeClass = windowSizeClass ), ) { - val showGradientBackground = appState.currentTopLevelDestination == TopLevelDestination.FOR_YOU + val shouldShowGradientBackground = + appState.currentTopLevelDestination == TopLevelDestination.FOR_YOU NiaBackground { NiaGradientBackground( - topColor = if (showGradientBackground) { + topColor = if (shouldShowGradientBackground) { LocalGradientColors.current.top } else { Color.Unspecified }, - bottomColor = if (showGradientBackground) { + bottomColor = if (shouldShowGradientBackground) { LocalGradientColors.current.bottom } else { Color.Unspecified }, - containerColor = if (showGradientBackground) { + containerColor = if (shouldShowGradientBackground) { LocalGradientColors.current.container } else { Color.Unspecified From 0917cdebecaf9110122343a5b47ff62dfb09f20f Mon Sep 17 00:00:00 2001 From: Don Turner Date: Wed, 21 Dec 2022 16:47:53 +0000 Subject: [PATCH 3/3] Refactor NiaGradientBackground to accept GradientColors Change-Id: I55840b22e123490097710570bf11554554df90f9 --- .../samples/apps/nowinandroid/ui/NiaApp.kt | 17 ++++------------- .../core/designsystem/component/Background.kt | 19 ++++++++++--------- .../core/designsystem/theme/Gradient.kt | 4 ++++ 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt index 55be2dc55..a3f570ad5 100644 --- a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt +++ b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt @@ -66,6 +66,7 @@ import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopAp 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.NiaIcons +import com.google.samples.apps.nowinandroid.core.designsystem.theme.GradientColors import com.google.samples.apps.nowinandroid.core.designsystem.theme.LocalGradientColors import com.google.samples.apps.nowinandroid.feature.settings.R as settingsR import com.google.samples.apps.nowinandroid.feature.settings.SettingsDialog @@ -92,20 +93,10 @@ fun NiaApp( NiaBackground { NiaGradientBackground( - topColor = if (shouldShowGradientBackground) { - LocalGradientColors.current.top + gradientColors = if (shouldShowGradientBackground) { + LocalGradientColors.current } else { - Color.Unspecified - }, - bottomColor = if (shouldShowGradientBackground) { - LocalGradientColors.current.bottom - } else { - Color.Unspecified - }, - containerColor = if (shouldShowGradientBackground) { - LocalGradientColors.current.container - } else { - Color.Unspecified + GradientColors() }, ) { val snackbarHostState = remember { SnackbarHostState() } diff --git a/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Background.kt b/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Background.kt index 6eb818011..40eae962f 100644 --- a/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Background.kt +++ b/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Background.kt @@ -34,6 +34,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.google.samples.apps.nowinandroid.core.designsystem.theme.GradientColors import com.google.samples.apps.nowinandroid.core.designsystem.theme.LocalBackgroundTheme import com.google.samples.apps.nowinandroid.core.designsystem.theme.LocalGradientColors import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme @@ -69,23 +70,23 @@ fun NiaBackground( * of a [Box] within a [Surface]. * * @param modifier Modifier to be applied to the background. - * @param topColor The top gradient color to be rendered. - * @param bottomColor The bottom gradient color to be rendered. - * @param containerColor The container color over which the gradient will be rendered. + * @param gradientColors The gradient colors to be rendered. * @param content The background content. */ @Composable fun NiaGradientBackground( modifier: Modifier = Modifier, - topColor: Color = LocalGradientColors.current.top, - bottomColor: Color = LocalGradientColors.current.bottom, - containerColor: Color = LocalGradientColors.current.container, + gradientColors: GradientColors = LocalGradientColors.current, content: @Composable () -> Unit ) { - val currentTopColor by rememberUpdatedState(topColor) - val currentBottomColor by rememberUpdatedState(bottomColor) + val currentTopColor by rememberUpdatedState(gradientColors.top) + val currentBottomColor by rememberUpdatedState(gradientColors.bottom) Surface( - color = if (containerColor == Color.Unspecified) Color.Transparent else containerColor, + color = if (gradientColors.container == Color.Unspecified) { + Color.Transparent + } else { + gradientColors.container + }, modifier = modifier.fillMaxSize() ) { Box( diff --git a/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/theme/Gradient.kt b/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/theme/Gradient.kt index c77041e21..f471af761 100644 --- a/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/theme/Gradient.kt +++ b/core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/theme/Gradient.kt @@ -22,6 +22,10 @@ import androidx.compose.ui.graphics.Color /** * A class to model gradient color values for Now in Android. + * + * @param top The top gradient color to be rendered. + * @param bottom The bottom gradient color to be rendered. + * @param container The container gradient color over which the gradient will be rendered. */ @Immutable data class GradientColors(