Add TopAppBar to the "For You screen"

Change-Id: I0bb1a5038d697adebad4e662755baaba72ded529

core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NiaScreens.kt

@@ -16,63 +16,18 @@
 
 package com.google.samples.apps.nowinandroid.core.ui
 
-import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.MoreVert
-import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.ripple.RippleAlpha
 import androidx.compose.material.ripple.RippleTheme
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.text.font.FontWeight
-
-@Composable
-fun NiaToolbar(
-    modifier: Modifier = Modifier,
-    @StringRes titleRes: Int,
-    onSearchClick: () -> Unit = {},
-    onMenuClick: () -> Unit = {},
-) {
-    Row(
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = modifier.fillMaxWidth()
-    ) {
-        IconButton(onClick = { onSearchClick() }) {
-            Icon(
-                imageVector = Icons.Filled.Search,
-                contentDescription = null
-            )
-        }
-        Text(
-            text = stringResource(id = titleRes),
-            style = MaterialTheme.typography.titleLarge,
-            fontWeight = FontWeight.Bold
-        )
-        IconButton(onClick = { onMenuClick() }) {
-            Icon(
-                imageVector = Icons.Filled.MoreVert,
-                contentDescription = null
-            )
-        }
-    }
-}
 
 @Composable
 fun NiaLoadingIndicator(

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

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.samples.apps.nowinandroid.core.ui.component
+
+import androidx.annotation.StringRes
+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.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.google.samples.apps.nowinandroid.core.ui.R
+
+@Composable
+fun NiaTopAppBar(
+    @StringRes titleRes: Int,
+    navigationIcon: ImageVector,
+    navigationIconContentDescription: String?,
+    actionIcon: ImageVector,
+    actionIconContentDescription: String?,
+    modifier: Modifier = Modifier,
+    onNavigationClick: () -> Unit = {},
+    onActionClick: () -> Unit = {}
+) {
+    CenterAlignedTopAppBar(
+        title = { Text(text = stringResource(id = titleRes)) },
+        navigationIcon = {
+            IconButton(onClick = onNavigationClick) {
+                Icon(
+                    imageVector = navigationIcon,
+                    contentDescription = navigationIconContentDescription,
+                    tint = MaterialTheme.colorScheme.onSurface
+                )
+            }
+        },
+        actions = {
+            IconButton(onClick = onActionClick) {
+                Icon(
+                    imageVector = actionIcon,
+                    contentDescription = actionIconContentDescription,
+                    tint = MaterialTheme.colorScheme.onSurface
+                )
+            }
+        },
+        modifier = modifier
+    )
+}
+
+@Preview("Top App Bar")
+@Composable
+fun NiaTopAppBarPreview() {
+    NiaTopAppBar(
+        titleRes = R.string.top_app_bar_preview_title,
+        navigationIcon = Icons.Default.Search,
+        navigationIconContentDescription = "Navigation icon",
+        actionIcon = Icons.Default.MoreVert,
+        actionIconContentDescription = "Action icon"
+    )
+}

core-ui/src/main/res/values/strings.xml

@@ -19,4 +19,6 @@
     <string name="back">Back</string>
 
     <string name="card_tap_action">Open Resource Link</string>
+
+    <string name="top_app_bar_preview_title">Title</string>
 </resources>

feature-following/src/main/java/com/google/samples/apps/nowinandroid/feature/following/FollowingScreen.kt

@@ -18,6 +18,9 @@ package com.google.samples.apps.nowinandroid.feature.following
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -28,9 +31,9 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.google.samples.apps.nowinandroid.core.ui.NiaLoadingIndicator
-import com.google.samples.apps.nowinandroid.core.ui.NiaToolbar
 import com.google.samples.apps.nowinandroid.core.ui.component.NiaTab
 import com.google.samples.apps.nowinandroid.core.ui.component.NiaTabRow
+import com.google.samples.apps.nowinandroid.core.ui.component.NiaTopAppBar
 
 @Composable
 fun InterestsRoute(
@@ -69,7 +72,17 @@ fun FollowingScreen(
         modifier = modifier,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        NiaToolbar(titleRes = R.string.interests)
+        NiaTopAppBar(
+            titleRes = R.string.interests,
+            navigationIcon = Icons.Filled.Search,
+            navigationIconContentDescription = stringResource(
+                id = R.string.top_app_bar_navigation_button_content_desc
+            ),
+            actionIcon = Icons.Filled.MoreVert,
+            actionIconContentDescription = stringResource(
+                id = R.string.top_app_bar_navigation_button_content_desc
+            )
+        )
         when (uiState) {
             FollowingUiState.Loading ->
                 NiaLoadingIndicator(

feature-following/src/main/res/values/strings.xml

@@ -21,4 +21,6 @@
     <string name="following_empty_header">"No available data"</string>
     <string name="interests_card_follow_button_content_desc">Follow interest button</string>
     <string name="interests_card_unfollow_button_content_desc">Unfollow interest button</string>
+    <string name="top_app_bar_action_button_content_desc">Menu</string>
+    <string name="top_app_bar_navigation_button_content_desc">Search</string>
 </resources>

feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt

@@ -33,6 +33,9 @@ import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.outlined.AccountCircle
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -64,6 +67,7 @@ import com.google.samples.apps.nowinandroid.core.model.data.Topic
 import com.google.samples.apps.nowinandroid.core.ui.NewsResourceCardExpanded
 import com.google.samples.apps.nowinandroid.core.ui.NiaLoadingIndicator
 import com.google.samples.apps.nowinandroid.core.ui.component.NiaToggleButton
+import com.google.samples.apps.nowinandroid.core.ui.component.NiaTopAppBar
 import com.google.samples.apps.nowinandroid.core.ui.icon.NiaIcons
 import com.google.samples.apps.nowinandroid.core.ui.theme.NiaTypography
 import com.google.samples.apps.nowinandroid.feature.foryou.ForYouFeedUiState.PopulatedFeed
@@ -99,6 +103,19 @@ fun ForYouScreen(
     LazyColumn(
         modifier = modifier.fillMaxSize()
     ) {
+        item {
+            NiaTopAppBar(
+                titleRes = R.string.top_app_bar_title,
+                navigationIcon = Icons.Filled.Search,
+                navigationIconContentDescription = stringResource(
+                    id = R.string.top_app_bar_navigation_button_content_desc
+                ),
+                actionIcon = Icons.Outlined.AccountCircle,
+                actionIconContentDescription = stringResource(
+                    id = R.string.top_app_bar_navigation_button_content_desc
+                )
+            )
+        }
         when (uiState) {
             is ForYouFeedUiState.Loading -> {
                 item {

feature-foryou/src/main/res/values/strings.xml

@@ -22,6 +22,9 @@
     <string name="navigate_up">Navigate up</string>
     <string name="onboarding_guidance_title">What are you interested in?</string>
     <string name="onboarding_guidance_subtitle">Updates from topics you follow will appear here. Follow some things to get started.</string>
+    <string name="top_app_bar_title">Now in Android</string>
+    <string name="top_app_bar_action_button_content_desc">My account</string>
+    <string name="top_app_bar_navigation_button_content_desc">Search</string>
 
     <!-- Authors-->
     <string name="following">You are following</string>