Merge pull request #467 from angeles-bilbao6/bug-fix459/top-bar

[Jetnews] TopAppBar doesn't match design spec

Author: JoseAlcerreca

JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetnews.ui
 
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
@@ -38,8 +39,9 @@ fun JetnewsApp(
  JetnewsTheme {
  ProvideWindowInsets {
  val systemUiController = rememberSystemUiController()
+ val darkIcons = MaterialTheme.colors.isLight
  SideEffect {
- systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = false)
+ systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = darkIcons)
  }
 
  val navController = rememberNavController()

JetNews/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt

@@ -19,11 +19,16 @@ package com.example.jetnews.ui.article
 import android.content.Context
 import android.content.Intent
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
@@ -46,6 +51,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -60,6 +66,7 @@ import com.example.jetnews.model.Post
 import com.example.jetnews.ui.components.InsetAwareTopAppBar
 import com.example.jetnews.ui.home.BookmarkButton
 import com.example.jetnews.ui.theme.JetnewsTheme
+import com.example.jetnews.utils.isScrolled
 import com.example.jetnews.utils.supportWideScreen
 import com.google.accompanist.insets.navigationBarsPadding
 import kotlinx.coroutines.runBlocking
@@ -116,25 +123,45 @@ fun ArticleScreen(
  if (showDialog) {
  FunctionalityNotAvailablePopup { showDialog = false }
  }
-
+ val scrollState = rememberLazyListState()
  Scaffold(
  topBar = {
  InsetAwareTopAppBar(
  title = {
- Text(
- text = stringResource(id = R.string.article_published_in, formatArgs = arrayOf(post.publication?.name.orEmpty())),
- style = MaterialTheme.typography.subtitle2,
- color = LocalContentColor.current
- )
+ Row(
+ modifier = Modifier
+ .fillMaxWidth()
+ .wrapContentWidth(align = Alignment.CenterHorizontally)
+ .padding(start = 30.dp)
+ ) {
+ Image(
+ painter = painterResource(id = R.drawable.icon_article_background),
+ contentDescription = null,
+ modifier = Modifier
+ .clip(CircleShape)
+ .size(36.dp)
+ )
+ Text(
+ text = stringResource(id = R.string.published_in, post.publication?.name ?: ""),
+ style = MaterialTheme.typography.subtitle2,
+ color = LocalContentColor.current,
+ modifier = Modifier
+ .padding(start = 10.dp)
+ .weight(1.5f)
+ )
+ }
  },
  navigationIcon = {
  IconButton(onClick = onBack) {
  Icon(
  imageVector = Icons.Filled.ArrowBack,
- contentDescription = stringResource(R.string.cd_navigate_up)
+ contentDescription = stringResource(R.string.cd_navigate_up),
+ tint = MaterialTheme.colors.primary
  )
  }
- }
+ },
+ elevation = if (!scrollState.isScrolled) 0.dp else 4.dp,
+ backgroundColor = MaterialTheme.colors.surface
  )
  },
  bottomBar = {
@@ -148,6 +175,7 @@ fun ArticleScreen(
  ) { innerPadding ->
  PostContent(
  post = post,
+ state = scrollState,
  modifier = Modifier
  // innerPadding takes into account the top and bottom bar
  .padding(innerPadding)

JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt

@@ -30,7 +30,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Colors
 import androidx.compose.material.ContentAlpha
@@ -80,8 +82,13 @@ import com.example.jetnews.ui.theme.JetnewsTheme
 private val defaultSpacerSize = 16.dp
 
 @Composable
-fun PostContent(post: Post, modifier: Modifier = Modifier) {
+fun PostContent(
+ post: Post,
+ state: LazyListState = rememberLazyListState(),
+ modifier: Modifier = Modifier
+) {
  LazyColumn(
+ state = state,
  modifier = modifier.padding(horizontal = defaultSpacerSize)
  ) {
  item {

JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt

@@ -24,8 +24,10 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Divider
 import androidx.compose.material.ExperimentalMaterialApi
@@ -38,6 +40,8 @@ import androidx.compose.material.SnackbarHost
 import androidx.compose.material.SnackbarResult
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -59,6 +63,7 @@ import com.example.jetnews.data.posts.impl.BlockingFakePostsRepository
 import com.example.jetnews.model.Post
 import com.example.jetnews.ui.components.InsetAwareTopAppBar
 import com.example.jetnews.ui.theme.JetnewsTheme
+import com.example.jetnews.utils.isScrolled
 import com.example.jetnews.utils.supportWideScreen
 import com.google.accompanist.insets.LocalWindowInsets
 import com.google.accompanist.insets.rememberInsetsPaddingValues
@@ -122,21 +127,44 @@ fun HomeScreen(
  openDrawer: () -> Unit,
  scaffoldState: ScaffoldState
 ) {
+ val scrollState = rememberLazyListState()
  Scaffold(
  scaffoldState = scaffoldState,
  snackbarHost = { SnackbarHost(hostState = it, modifier = Modifier.systemBarsPadding()) },
  topBar = {
  val title = stringResource(id = R.string.app_name)
  InsetAwareTopAppBar(
- title = { Text(text = title) },
+ title = {
+ Icon(
+ painter = painterResource(R.drawable.ic_jetnews_wordmark),
+ contentDescription = title,
+ tint = MaterialTheme.colors.onBackground,
+ modifier = Modifier
+ .fillMaxSize()
+ .padding(bottom = 4.dp, top = 10.dp)
+ )
+ },
  navigationIcon = {
  IconButton(onClick = openDrawer) {
  Icon(
  painter = painterResource(R.drawable.ic_jetnews_logo),
- contentDescription = stringResource(R.string.cd_open_navigation_drawer)
+ contentDescription = stringResource(R.string.cd_open_navigation_drawer),
+ tint = MaterialTheme.colors.primary
  )
  }
- }
+ },
+ actions = {
+ IconButton(
+ onClick = { /* TODO: Open search */ }
+ ) {
+ Icon(
+ imageVector = Icons.Filled.Search,
+ contentDescription = stringResource(R.string.cd_search)
+ )
+ }
+ },
+ backgroundColor = MaterialTheme.colors.surface,
+ elevation = if (!scrollState.isScrolled) 0.dp else 4.dp
  )
  }
  ) { innerPadding ->
@@ -156,7 +184,8 @@ fun HomeScreen(
  navigateToArticle = navigateToArticle,
  favorites = uiState.favorites,
  onToggleFavorite = onToggleFavorite,
- modifier = modifier.supportWideScreen()
+ modifier = modifier.supportWideScreen(),
+ scrollState = scrollState
  )
  }
  )
@@ -240,10 +269,11 @@ private fun HomeScreenErrorAndContent(
  onRefresh: () -> Unit,
  navigateToArticle: (String) -> Unit,
  onToggleFavorite: (String) -> Unit,
- modifier: Modifier = Modifier
+ modifier: Modifier = Modifier,
+ scrollState: LazyListState
 ) {
  if (posts.isNotEmpty()) {
- PostList(posts, navigateToArticle, favorites, onToggleFavorite, modifier)
+ PostList(posts, navigateToArticle, favorites, onToggleFavorite, modifier, scrollState)
  } else if (!isShowingErrors) {
  // if there are no posts, and no error, let the user refresh manually
  TextButton(onClick = onRefresh, modifier.fillMaxSize()) {
@@ -271,7 +301,8 @@ private fun PostList(
  navigateToArticle: (postId: String) -> Unit,
  favorites: Set<String>,
  onToggleFavorite: (String) -> Unit,
- modifier: Modifier = Modifier
+ modifier: Modifier = Modifier,
+ scrollState: LazyListState = rememberLazyListState(),
 ) {
  val postTop = posts[3]
  val postsSimple = posts.subList(0, 2)
@@ -280,6 +311,7 @@ private fun PostList(
 
  LazyColumn(
  modifier = modifier,
+ state = scrollState,
  contentPadding = rememberInsetsPaddingValues(
  insets = LocalWindowInsets.current.systemBars,
  applyTop = false

JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.paddingFromBaseline
@@ -41,6 +42,8 @@ import androidx.compose.material.Surface
 import androidx.compose.material.Tab
 import androidx.compose.material.TabRow
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -54,6 +57,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -163,16 +167,36 @@ fun InterestsScreen(
  Scaffold(
  scaffoldState = scaffoldState,
  topBar = {
+
  InsetAwareTopAppBar(
- title = { Text(stringResource(id = R.string.interests_title)) },
+ title = {
+ Text(
+ text = stringResource(R.string.cd_interests),
+ modifier = Modifier.fillMaxWidth(),
+ textAlign = TextAlign.Center
+ )
+ },
  navigationIcon = {
  IconButton(onClick = openDrawer) {
  Icon(
  painter = painterResource(R.drawable.ic_jetnews_logo),
- contentDescription = stringResource(R.string.cd_open_navigation_drawer)
+ contentDescription = stringResource(R.string.cd_open_navigation_drawer),
+ tint = MaterialTheme.colors.primary
  )
  }
- }
+ },
+ actions = {
+ IconButton(
+ onClick = { /* TODO: Open search */ }
+ ) {
+ Icon(
+ imageVector = Icons.Filled.Search,
+ contentDescription = stringResource(R.string.cd_search)
+ )
+ }
+ },
+ backgroundColor = MaterialTheme.colors.surface,
+ elevation = 0.dp
  )
  }
  ) {

JetNews/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt

@@ -30,7 +30,9 @@ private val LightThemeColors = lightColors(
  secondary = Red700,
  secondaryVariant = Red900,
  onSecondary = Color.White,
- error = Red800
+ error = Red800,
+ onBackground = Color.Black,
+
 )
 
 private val DarkThemeColors = darkColors(
@@ -39,7 +41,8 @@ private val DarkThemeColors = darkColors(
  onPrimary = Color.Black,
  secondary = Red300,
  onSecondary = Color.Black,
- error = Red200
+ error = Red200,
+ onBackground = Color.White
 )
 
 @Composable

JetNews/app/src/main/java/com/example/jetnews/utils/LazyListUtils.kt

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2021 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.example.jetnews.utils
+
+import androidx.compose.foundation.lazy.LazyListState
+
+val LazyListState.isScrolled: Boolean
+ get() = firstVisibleItemIndex > 0 || firstVisibleItemScrollOffset > 0

JetNews/app/src/main/res/drawable/icon_article_background.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2020 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
+
+ http://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.
+ -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="48dp"
+ android:height="48dp"
+ android:viewportWidth="24.0"
+ android:viewportHeight="24.0">
+ <group>
+ <path android:name="square"
+ android:fillColor="#FF073042"
+ android:pathData="M0,0 L24,0 L24,24 L0,24 z" />
+ <path android:fillColor="#3DDC84"
+ android:pathData="M17.6,11.48 L19.44,8.3a0.63,0.63 0,0 0,-1.09 -0.63l-1.88,3.24a11.43,11.43 0,0 0,-8.94 0L5.65,7.67a0.63,0.63 0,0 0,-1.09 0.63L6.4,11.48A10.81,10.81 0,0 0,1 20L23,20A10.81,10.81 0,0 0,17.6 11.48ZM7,17.25A1.25,1.25 0,1 1,8.25 16,1.25 1.25,0 0,1 7,17.25ZM17,17.25A1.25,1.25 0,1 1,18.25 16,1.25 1.25,0 0,1 17,17.25Z"/>
+
+ </group>
+</vector>