Merge pull request #491 from android/av/fix-background-composable

Updated background composable for gradient

app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt

@@ -66,6 +66,8 @@ 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
 import com.google.samples.apps.nowinandroid.navigation.NiaNavHost
@@ -86,101 +88,103 @@ fun NiaApp(
         windowSizeClass = windowSizeClass
     ),
 ) {
-    val background: @Composable (@Composable () -> Unit) -> Unit =
+    val shouldShowGradientBackground =
-        when (appState.currentTopLevelDestination) {
+        appState.currentTopLevelDestination == TopLevelDestination.FOR_YOU
-            TopLevelDestination.FOR_YOU -> {
-                content ->
-                NiaGradientBackground(content = content)
-            }
-            else -> { content -> NiaBackground(content = content) }
-        }
-
-    background {
-        val snackbarHostState = remember { SnackbarHostState() }
 
-        val isOffline by appState.isOffline.collectAsStateWithLifecycle()
+    NiaBackground {
+        NiaGradientBackground(
+            gradientColors = if (shouldShowGradientBackground) {
+                LocalGradientColors.current
+            } else {
+                GradientColors()
+            },
+        ) {
+            val snackbarHostState = remember { SnackbarHostState() }
 
-        // If user is not connected to the internet show a snack bar to inform them.
+            val isOffline by appState.isOffline.collectAsStateWithLifecycle()
-        val notConnectedMessage = stringResource(R.string.not_connected)
-        LaunchedEffect(isOffline) {
-            if (isOffline) snackbarHostState.showSnackbar(
-                message = notConnectedMessage,
-                duration = Indefinite
-            )
-        }
 
-        if (appState.shouldShowSettingsDialog) {
+            // If user is not connected to the internet show a snack bar to inform them.
-            SettingsDialog(
+            val notConnectedMessage = stringResource(R.string.not_connected)
-                onDismiss = { appState.setShowSettingsDialog(false) }
+            LaunchedEffect(isOffline) {
-            )
+                if (isOffline) snackbarHostState.showSnackbar(
-        }
+                    message = notConnectedMessage,
+                    duration = Indefinite
+                )
+            }
 
-        Scaffold(
+            if (appState.shouldShowSettingsDialog) {
-            modifier = Modifier.semantics {
+                SettingsDialog(
-                testTagsAsResourceId = true
+                    onDismiss = { appState.setShowSettingsDialog(false) }
-            },
+                )
-            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")
-                    )
-                }
             }
-        ) { padding ->
+
-            Row(
+            Scaffold(
-                Modifier
+                modifier = Modifier.semantics {
-                    .fillMaxSize()
+                    testTagsAsResourceId = true
-                    .padding(padding)
+                },
-                    .consumedWindowInsets(padding)
+                containerColor = Color.Transparent,
-                    .windowInsetsPadding(
+                contentColor = MaterialTheme.colorScheme.onBackground,
-                        WindowInsets.safeDrawing.only(
+                contentWindowInsets = WindowInsets(0, 0, 0, 0),
-                            WindowInsetsSides.Horizontal
+                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()) {
+                    Column(Modifier.fillMaxSize()) {
-                    // Show the top app bar on top level destinations.
+                        // Show the top app bar on top level destinations.
-                    val destination = appState.currentTopLevelDestination
+                        val destination = appState.currentTopLevelDestination
-                    if (destination != null) {
+                        if (destination != null) {
-                        NiaTopAppBar(
+                            NiaTopAppBar(
-                            titleRes = destination.titleTextId,
+                                titleRes = destination.titleTextId,
-                            actionIcon = NiaIcons.Settings,
+                                actionIcon = NiaIcons.Settings,
-                            actionIconContentDescription = stringResource(
+                                actionIconContentDescription = stringResource(
-                                id = settingsR.string.top_app_bar_action_icon_description
+                                    id = settingsR.string.top_app_bar_action_icon_description
-                            ),
+                                ),
-                            colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-                                containerColor = Color.Transparent
+                                    containerColor = Color.Transparent
-                            ),
+                                ),
-                            onActionClick = { appState.setShowSettingsDialog(true) }
+                                onActionClick = { appState.setShowSettingsDialog(true) }
+                            )
+                        }
+
+                        NiaNavHost(
+                            navController = appState.navController,
+                            onBackClick = appState::onBackClick
                         )
                     }
 
-                    NiaNavHost(
+                    // TODO: We may want to add padding or spacer when the snackbar is shown so that
-                        navController = appState.navController,
+                    //  content doesn't display behind it.
-                        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.
             }
         }
     }

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 gradientColors The gradient colors 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 content The background content.
  */
 @Composable
 fun NiaGradientBackground(
     modifier: Modifier = Modifier,
-    topColor: Color = LocalGradientColors.current.top,
+    gradientColors: GradientColors = LocalGradientColors.current,
-    bottomColor: Color = LocalGradientColors.current.bottom,
-    containerColor: Color = LocalGradientColors.current.container,
     content: @Composable () -> Unit
 ) {
-    val currentTopColor by rememberUpdatedState(topColor)
+    val currentTopColor by rememberUpdatedState(gradientColors.top)
-    val currentBottomColor by rememberUpdatedState(bottomColor)
+    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(

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(