msb-public
/
nowinandroid
mirror of https://github.com/android/nowinandroid.git
1
0
Code Issues Projects Releases Wiki Activity

Add TopAppBar to the "For You screen"

Browse Source 
Change-Id: I0bb1a5038d697adebad4e662755baaba72ded529
pull/2/head
Milosz Moczkowski 3 years ago committed by Don Turner
parent 4c4a9c9e12
commit fb0ed61ac8
7 changed files with 119 additions and 47 deletions
Show Stats Download Patch File Download Diff File

45
core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NiaScreens.kt
Unescape View File

@ -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(

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

@ -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"
)
}

2
core-ui/src/main/res/values/strings.xml
Unescape View File

@ -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>

17
feature-following/src/main/java/com/google/samples/apps/nowinandroid/feature/following/FollowingScreen.kt
Unescape View File

@ -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(

2
feature-following/src/main/res/values/strings.xml
Unescape View File

@ -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>

17
feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt
Unescape View File

@ -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 {

3
feature-foryou/src/main/res/values/strings.xml
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save