Merge pull request #242 from android/av/built-in-insets

Update material3 with built-in insets support

Author: alexvanyo

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

@@ -31,7 +31,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.runtime.Composable
@@ -45,13 +44,15 @@ import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.navigation.NavDestination
 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.NiaGradientBackground
 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.NiaNavigationRail
 import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaNavigationRailItem
 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.theme.NiaTheme
+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.TopLevelDestination
 
@@ -66,13 +67,20 @@ fun NiaApp(
     appState: NiaAppState = rememberNiaAppState(windowSizeClass)
 ) {
     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(
                 modifier = Modifier.semantics {
                     testTagsAsResourceId = true
                 },
                 containerColor = Color.Transparent,
                 contentColor = MaterialTheme.colorScheme.onBackground,
+                contentWindowInsets = WindowInsets(0, 0, 0, 0),
                 bottomBar = {
                     if (appState.shouldShowBottomBar) {
                         NiaBottomBar(
@@ -158,42 +166,32 @@ private fun NiaBottomBar(
     onNavigateToDestination: (TopLevelDestination) -> Unit,
     currentDestination: NavDestination?
 ) {
-    // Wrap the navigation bar in a surface so the color behind the system
-    // navigation is equal to the container color of the navigation bar.
-    Surface(color = MaterialTheme.colorScheme.surface) {
-        NiaNavigationBar(
-            modifier = Modifier.windowInsetsPadding(
-                WindowInsets.safeDrawing.only(
-                    WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom
-                )
+    NiaNavigationBar {
+        destinations.forEach { destination ->
+            val selected =
+                currentDestination?.hierarchy?.any { it.route == destination.route } == true
+            NiaNavigationBarItem(
+                selected = selected,
+                onClick = { onNavigateToDestination(destination) },
+                icon = {
+                    val icon = if (selected) {
+                        destination.selectedIcon
+                    } else {
+                        destination.unselectedIcon
+                    }
+                    when (icon) {
+                        is ImageVectorIcon -> Icon(
+                            imageVector = icon.imageVector,
+                            contentDescription = null
+                        )
+                        is DrawableResourceIcon -> Icon(
+                            painter = painterResource(id = icon.id),
+                            contentDescription = null
+                        )
+                    }
+                },
+                label = { Text(stringResource(destination.iconTextId)) }
             )
-        ) {
-            destinations.forEach { destination ->
-                val selected =
-                    currentDestination?.hierarchy?.any { it.route == destination.route } == true
-                NiaNavigationBarItem(
-                    selected = selected,
-                    onClick = { onNavigateToDestination(destination) },
-                    icon = {
-                        val icon = if (selected) {
-                            destination.selectedIcon
-                        } else {
-                            destination.unselectedIcon
-                        }
-                        when (icon) {
-                            is ImageVectorIcon -> Icon(
-                                imageVector = icon.imageVector,
-                                contentDescription = null
-                            )
-                            is DrawableResourceIcon -> Icon(
-                                painter = painterResource(id = icon.id),
-                                contentDescription = null
-                            )
-                        }
-                    },
-                    label = { Text(stringResource(destination.iconTextId)) }
-                )
-            }
         }
     }
 }

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt

@@ -16,13 +16,13 @@
 
 package com.google.samples.apps.nowinandroid.core.designsystem.component
 
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
-import androidx.compose.material3.Shapes
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -58,13 +58,13 @@ fun NiaFilterChip(
         },
         modifier = modifier,
         enabled = enabled,
-        selectedIcon = {
+        trailingIcon = {
             Icon(
                 imageVector = NiaIcons.Check,
                 contentDescription = null
             )
         },
-        shape = Shapes.Full,
+        shape = CircleShape,
         border = FilterChipDefaults.filterChipBorder(
             borderColor = MaterialTheme.colorScheme.onBackground,
             selectedBorderColor = MaterialTheme.colorScheme.onBackground,

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Navigation.kt

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

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/TopAppBar.kt

@@ -21,6 +21,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -33,6 +34,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun NiaTopAppBar(
     @StringRes titleRes: Int,
@@ -73,6 +75,7 @@ fun NiaTopAppBar(
 /**
  * Top app bar with action, displayed on the right
  */
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun NiaTopAppBar(
     @StringRes titleRes: Int,
@@ -98,6 +101,7 @@ fun NiaTopAppBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Preview("Top App Bar")
 @Composable
 fun NiaTopAppBarPreview() {

feature/bookmarks/src/main/java/com/google/samples/apps/nowinandroid/feature/bookmarks/BookmarksScreen.kt

@@ -21,14 +21,11 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.consumedWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.grid.GridCells.Adaptive
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -45,7 +42,6 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.ExperimentalLifecycleComposeApi
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaGradientBackground
 import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopAppBar
 import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
 import com.google.samples.apps.nowinandroid.core.ui.NewsFeedUiState
@@ -72,46 +68,42 @@ fun BookmarksScreen(
     removeFromBookmarks: (String) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    NiaGradientBackground {
-        Scaffold(
-            topBar = {
-                NiaTopAppBar(
-                    titleRes = R.string.top_app_bar_title_saved,
-                    actionIcon = NiaIcons.AccountCircle,
-                    actionIconContentDescription = stringResource(
-                        id = R.string.top_app_bar_action_menu
-                    ),
-                    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-                        containerColor = Color.Transparent
-                    ),
-                    modifier = Modifier.windowInsetsPadding(
-                        WindowInsets.safeDrawing.only(WindowInsetsSides.Top)
-                    )
-                )
-            },
-            containerColor = Color.Transparent
-        ) { 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
+    Scaffold(
+        topBar = {
+            NiaTopAppBar(
+                titleRes = R.string.top_app_bar_title_saved,
+                actionIcon = NiaIcons.AccountCircle,
+                actionIconContentDescription = stringResource(
+                    id = R.string.top_app_bar_action_menu
+                ),
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                    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
+            )
 
-                item(span = { GridItemSpan(maxLineSpan) }) {
-                    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
-                }
+            item(span = { GridItemSpan(maxLineSpan) }) {
+                Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
             }
         }
     }