From 3e5afc97a7e7949d990c1be20afa15987dda88ff Mon Sep 17 00:00:00 2001 From: Simona <35065668+simona-anomis@users.noreply.github.com> Date: Tue, 24 Sep 2024 12:30:24 +0100 Subject: [PATCH] Migrate Accessibility and Migration codelab end to M3 (#491) * Migrate Accessibility codelab end to M3 * Migrate Migration codelab end to M3 --- AccessibilityCodelab/app/build.gradle | 4 +- .../java/com/example/jetnews/ui/AppDrawer.kt | 20 +++---- .../java/com/example/jetnews/ui/JetnewsApp.kt | 56 +++++++++++-------- .../com/example/jetnews/ui/JetnewsNavGraph.kt | 9 +-- .../jetnews/ui/article/ArticleScreen.kt | 20 +++---- .../example/jetnews/ui/article/PostContent.kt | 56 +++++++++---------- .../ui/components/InsetAwareTopAppBar.kt | 27 +++++---- .../com/example/jetnews/ui/home/HomeScreen.kt | 28 +++------- .../com/example/jetnews/ui/home/PostCards.kt | 46 +++++++-------- .../jetnews/ui/interests/InterestsScreen.kt | 28 ++++------ .../com/example/jetnews/ui/theme/Color.kt | 2 + .../com/example/jetnews/ui/theme/Shape.kt | 2 +- .../com/example/jetnews/ui/theme/Theme.kt | 22 ++++---- .../java/com/example/jetnews/ui/theme/Type.kt | 32 +++++++---- .../app/src/main/res/values/styles.xml | 2 +- MigrationCodelab/app/build.gradle | 2 +- .../plantdetail/PlantDetailDescription.kt | 10 ++-- .../samples/apps/sunflower/theme/Theme.kt | 16 +++--- 18 files changed, 193 insertions(+), 189 deletions(-) diff --git a/AccessibilityCodelab/app/build.gradle b/AccessibilityCodelab/app/build.gradle index 49f59293a..47defc85b 100644 --- a/AccessibilityCodelab/app/build.gradle +++ b/AccessibilityCodelab/app/build.gradle @@ -78,7 +78,7 @@ dependencies { implementation "androidx.compose.runtime:runtime" implementation "androidx.compose.ui:ui" implementation "androidx.compose.foundation:foundation-layout" - implementation "androidx.compose.material:material" + implementation "androidx.compose.material3:material3" implementation "androidx.compose.material:material-icons-extended" implementation "androidx.compose.foundation:foundation" implementation "androidx.compose.animation:animation" @@ -94,8 +94,6 @@ dependencies { implementation "com.google.accompanist:accompanist-swiperefresh:$accompanist_version" implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version" - implementation "com.google.android.material:material:1.12.0" - implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1" implementation 'androidx.appcompat:appcompat:1.7.0' diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt index a508cadf8..b5682d1d3 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt @@ -27,11 +27,11 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width -import androidx.compose.material.Divider -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Surface -import androidx.compose.material.Text -import androidx.compose.material.TextButton +import androidx.compose.material3.Divider +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.ListAlt @@ -58,7 +58,7 @@ fun AppDrawer( Column(modifier = Modifier.fillMaxSize()) { Spacer(Modifier.height(24.dp)) JetNewsLogo(Modifier.padding(16.dp)) - Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f)) + Divider(color = MaterialTheme.colorScheme.onSurface.copy(alpha = .2f)) DrawerButton( icon = Icons.Filled.Home, label = "Home", @@ -87,13 +87,13 @@ private fun JetNewsLogo(modifier: Modifier = Modifier) { Image( painter = painterResource(R.drawable.ic_jetnews_logo), contentDescription = null, - colorFilter = ColorFilter.tint(MaterialTheme.colors.primary) + colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary) ) Spacer(Modifier.width(8.dp)) Image( painter = painterResource(R.drawable.ic_jetnews_wordmark), contentDescription = null, - colorFilter = ColorFilter.tint(MaterialTheme.colors.onSurface) + colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface) ) } } @@ -106,7 +106,7 @@ private fun DrawerButton( action: () -> Unit, modifier: Modifier = Modifier ) { - val colors = MaterialTheme.colors + val colors = MaterialTheme.colorScheme val imageAlpha = if (isSelected) { 1f } else { @@ -149,7 +149,7 @@ private fun DrawerButton( Spacer(Modifier.width(16.dp)) Text( text = label, - style = MaterialTheme.typography.body2, + style = MaterialTheme.typography.bodyMedium, color = textIconColor ) } diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt index 2df393c9a..c8e3e2e11 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt @@ -17,13 +17,20 @@ package com.example.jetnews.ui import android.annotation.SuppressLint -import androidx.compose.material.Scaffold -import androidx.compose.material.rememberScaffoldState +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.width +import androidx.compose.material3.DrawerValue +import androidx.compose.material3.ModalDrawerSheet +import androidx.compose.material3.ModalNavigationDrawer +import androidx.compose.material3.Scaffold +import androidx.compose.material3.rememberDrawerState import androidx.compose.runtime.Composable import androidx.compose.runtime.SideEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController import com.example.jetnews.data.AppContainer @@ -31,7 +38,7 @@ import com.example.jetnews.ui.theme.JetnewsTheme import com.google.accompanist.systemuicontroller.rememberSystemUiController import kotlinx.coroutines.launch -@SuppressLint("UnusedMaterialScaffoldPaddingParameter") +@SuppressLint("UnusedMaterialScaffoldPaddingParameter", "UnusedMaterial3ScaffoldPaddingParameter") @Composable fun JetnewsApp( appContainer: AppContainer @@ -44,29 +51,34 @@ fun JetnewsApp( val navController = rememberNavController() val coroutineScope = rememberCoroutineScope() - // This top level scaffold contains the app drawer, which needs to be accessible - // from multiple screens. An event to open the drawer is passed down to each - // screen that needs it. - val scaffoldState = rememberScaffoldState() val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route ?: MainDestinations.HOME_ROUTE - Scaffold( - scaffoldState = scaffoldState, + + val drawerState = rememberDrawerState(DrawerValue.Closed) + val scope = rememberCoroutineScope() + + ModalNavigationDrawer( + drawerState = drawerState, drawerContent = { - AppDrawer( - currentRoute = currentRoute, - navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) }, - navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) }, - closeDrawer = { coroutineScope.launch { scaffoldState.drawerState.close() } } - ) + ModalDrawerSheet(modifier = Modifier.width(300.dp), windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp)) { + AppDrawer( + currentRoute = currentRoute, + navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) }, + navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) }, + closeDrawer = { coroutineScope.launch { drawerState.close() } } + ) + } + }, + content = { + Scaffold { + JetnewsNavGraph( + appContainer = appContainer, + navController = navController, + drawerState = drawerState + ) + } } - ) { - JetnewsNavGraph( - appContainer = appContainer, - navController = navController, - scaffoldState = scaffoldState - ) - } + ) } } diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt index 0fef3ef46..525920efe 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt @@ -16,8 +16,9 @@ package com.example.jetnews.ui -import androidx.compose.material.ScaffoldState -import androidx.compose.material.rememberScaffoldState +import androidx.compose.material3.DrawerState +import androidx.compose.material3.DrawerValue +import androidx.compose.material3.rememberDrawerState import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope @@ -46,12 +47,12 @@ object MainDestinations { fun JetnewsNavGraph( appContainer: AppContainer, navController: NavHostController = rememberNavController(), - scaffoldState: ScaffoldState = rememberScaffoldState(), + drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), startDestination: String = MainDestinations.HOME_ROUTE ) { val actions = remember(navController) { MainActions(navController) } val coroutineScope = rememberCoroutineScope() - val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } } + val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } } NavHost( navController = navController, diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt index a1beedf4f..45d401d57 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt @@ -18,14 +18,14 @@ package com.example.jetnews.ui.article import android.content.res.Configuration.UI_MODE_NIGHT_YES import androidx.compose.foundation.layout.padding -import androidx.compose.material.AlertDialog -import androidx.compose.material.Icon -import androidx.compose.material.IconButton -import androidx.compose.material.LocalContentColor -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Scaffold -import androidx.compose.material.Text -import androidx.compose.material.TextButton +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.runtime.Composable @@ -90,7 +90,7 @@ fun ArticleScreen( title = { Text( text = "Published in: ${post.publication?.name}", - style = MaterialTheme.typography.subtitle2, + style = MaterialTheme.typography.titleSmall, color = LocalContentColor.current ) }, @@ -131,7 +131,7 @@ private fun FunctionalityNotAvailablePopup(onDismiss: () -> Unit) { text = { Text( text = "Functionality not available \uD83D\uDE48", - style = MaterialTheme.typography.body2 + style = MaterialTheme.typography.bodyMedium ) }, confirmButton = { diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt index 3f3a8d287..ff74a7166 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt @@ -32,16 +32,14 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.Colors -import androidx.compose.material.ContentAlpha -import androidx.compose.material.LocalContentAlpha -import androidx.compose.material.LocalContentColor -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Surface -import androidx.compose.material.Text -import androidx.compose.material.Typography +import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.material3.Typography import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle +import androidx.compose.material3.ColorScheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Modifier @@ -88,15 +86,15 @@ fun PostContent(post: Post, modifier: Modifier = Modifier) { PostHeaderImage(post) } item { - Text(text = post.title, style = MaterialTheme.typography.h4) + Text(text = post.title, style = MaterialTheme.typography.headlineMedium) Spacer(Modifier.height(8.dp)) } post.subtitle?.let { subtitle -> item { - CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { + CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) { Text( text = subtitle, - style = MaterialTheme.typography.body2, + style = MaterialTheme.typography.bodyMedium, lineHeight = 20.sp ) } @@ -147,14 +145,14 @@ private fun PostMetadata(metadata: Metadata) { Column { Text( text = metadata.author.name, - style = typography.caption, + style = typography.bodySmall, modifier = Modifier.padding(top = 4.dp) ) - CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { + CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) { Text( text = "${metadata.date} • ${metadata.readTimeMinutes} min read", - style = typography.caption + style = typography.bodySmall ) } } @@ -168,7 +166,7 @@ private fun Paragraph(paragraph: Paragraph) { val annotatedString = paragraphToAnnotatedString( paragraph, MaterialTheme.typography, - MaterialTheme.colors.codeBlockBackground + MaterialTheme.colorScheme.codeBlockBackground ) Box(modifier = Modifier.padding(bottom = trailingPadding)) { when (paragraph.type) { @@ -207,7 +205,7 @@ private fun CodeBlockParagraph( paragraphStyle: ParagraphStyle ) { Surface( - color = MaterialTheme.colors.codeBlockBackground, + color = MaterialTheme.colorScheme.codeBlockBackground, shape = MaterialTheme.shapes.small, modifier = Modifier.fillMaxWidth() ) { @@ -257,29 +255,29 @@ private data class ParagraphStyling( @Composable private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling { val typography = MaterialTheme.typography - var textStyle: TextStyle = typography.body1 + var textStyle: TextStyle = typography.bodyLarge var paragraphStyle = ParagraphStyle() var trailingPadding = 24.dp when (this) { - ParagraphType.Caption -> textStyle = typography.body1 - ParagraphType.Title -> textStyle = typography.h4 + ParagraphType.Caption -> textStyle = typography.bodyLarge + ParagraphType.Title -> textStyle = typography.headlineMedium ParagraphType.Subhead -> { - textStyle = typography.h6 + textStyle = typography.titleLarge trailingPadding = 16.dp } ParagraphType.Text -> { - textStyle = typography.body1.copy(lineHeight = 28.sp) + textStyle = typography.bodyLarge.copy(lineHeight = 28.sp) paragraphStyle = paragraphStyle.copy(lineHeight = 28.sp) } ParagraphType.Header -> { - textStyle = typography.h5 + textStyle = typography.headlineSmall trailingPadding = 16.dp } - ParagraphType.CodeBlock -> textStyle = typography.body1.copy( + ParagraphType.CodeBlock -> textStyle = typography.bodyLarge.copy( fontFamily = FontFamily.Monospace ) - ParagraphType.Quote -> textStyle = typography.body1 + ParagraphType.Quote -> textStyle = typography.bodyLarge ParagraphType.Bullet -> { paragraphStyle = ParagraphStyle(textIndent = TextIndent(firstLine = 8.sp)) } @@ -308,28 +306,28 @@ fun Markup.toAnnotatedStringItem( return when (this.type) { MarkupType.Italic -> { AnnotatedString.Range( - typography.body1.copy(fontStyle = FontStyle.Italic).toSpanStyle(), + typography.bodyLarge.copy(fontStyle = FontStyle.Italic).toSpanStyle(), start, end ) } MarkupType.Link -> { AnnotatedString.Range( - typography.body1.copy(textDecoration = TextDecoration.Underline).toSpanStyle(), + typography.bodyLarge.copy(textDecoration = TextDecoration.Underline).toSpanStyle(), start, end ) } MarkupType.Bold -> { AnnotatedString.Range( - typography.body1.copy(fontWeight = FontWeight.Bold).toSpanStyle(), + typography.bodyLarge.copy(fontWeight = FontWeight.Bold).toSpanStyle(), start, end ) } MarkupType.Code -> { AnnotatedString.Range( - typography.body1 + typography.bodyLarge .copy( background = codeBlockBackground, fontFamily = FontFamily.Monospace @@ -341,7 +339,7 @@ fun Markup.toAnnotatedStringItem( } } -private val Colors.codeBlockBackground: Color +private val ColorScheme.codeBlockBackground: Color get() = onSurface.copy(alpha = .15f) @Preview("Post content") diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt index 38d310f80..24c27928b 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt @@ -18,11 +18,11 @@ package com.example.jetnews.ui.components import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.statusBarsPadding -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Surface -import androidx.compose.material.TopAppBar -import androidx.compose.material.contentColorFor -import androidx.compose.material.primarySurface +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -33,28 +33,31 @@ import androidx.compose.ui.unit.dp * A wrapper around [TopAppBar] which uses [Modifier.statusBarsPadding] to shift the app bar's * contents down, but still draws the background behind the status bar too. */ +@OptIn(ExperimentalMaterial3Api::class) @Composable fun InsetAwareTopAppBar( title: @Composable () -> Unit, modifier: Modifier = Modifier, - navigationIcon: @Composable (() -> Unit)? = null, + navigationIcon: @Composable (() -> Unit), actions: @Composable RowScope.() -> Unit = {}, - backgroundColor: Color = MaterialTheme.colors.primarySurface, - contentColor: Color = contentColorFor(backgroundColor), + backgroundColor: Color = MaterialTheme.colorScheme.surface, elevation: Dp = 4.dp ) { Surface( color = backgroundColor, - elevation = elevation, + shadowElevation = elevation, + tonalElevation = elevation, modifier = modifier ) { TopAppBar( title = title, navigationIcon = navigationIcon, actions = actions, - backgroundColor = Color.Transparent, - contentColor = contentColor, - elevation = 0.dp, + colors = TopAppBarDefaults.topAppBarColors().copy( + containerColor = Color.Transparent, + titleContentColor = MaterialTheme.colorScheme.onPrimary, + navigationIconContentColor = MaterialTheme.colorScheme.onPrimary + ), modifier = Modifier.statusBarsPadding() ) } diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt index 5fc2ce781..6ac9a112b 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt @@ -29,17 +29,13 @@ import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items -import androidx.compose.material.Divider -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.Icon -import androidx.compose.material.IconButton -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Scaffold -import androidx.compose.material.ScaffoldState -import androidx.compose.material.Text -import androidx.compose.material.rememberScaffoldState +import androidx.compose.material3.Divider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource @@ -61,20 +57,17 @@ import kotlinx.coroutines.launch * @param postsRepository data source for this screen * @param navigateToArticle (event) request navigation to Article screen * @param openDrawer (event) request opening the app drawer - * @param scaffoldState (state) state for the [Scaffold] component on this screen */ @Composable fun HomeScreen( postsRepository: PostsRepository, navigateToArticle: (String) -> Unit, openDrawer: () -> Unit, - scaffoldState: ScaffoldState = rememberScaffoldState() ) { HomeScreen( posts = postsRepository.getPosts(), navigateToArticle = navigateToArticle, openDrawer = openDrawer, - scaffoldState = scaffoldState ) } @@ -88,19 +81,15 @@ fun HomeScreen( * @param onToggleFavorite (event) toggles favorite for a post * @param navigateToArticle (event) request navigation to Article screen * @param openDrawer (event) request opening the app drawer - * @param scaffoldState (state) state for the [Scaffold] component on this screen */ -@OptIn(ExperimentalMaterialApi::class) @Composable fun HomeScreen( posts: List, navigateToArticle: (String) -> Unit, openDrawer: () -> Unit, - scaffoldState: ScaffoldState ) { val coroutineScope = rememberCoroutineScope() Scaffold( - scaffoldState = scaffoldState, topBar = { val title = stringResource(id = R.string.app_name) InsetAwareTopAppBar( @@ -170,7 +159,7 @@ private fun PostListPopularSection( Text( modifier = Modifier.padding(16.dp), text = stringResource(id = R.string.home_popular_section_title), - style = MaterialTheme.typography.subtitle1 + style = MaterialTheme.typography.titleMedium ) LazyRow(contentPadding = PaddingValues(end = 16.dp)) { @@ -193,7 +182,7 @@ private fun PostListPopularSection( private fun PostListDivider() { Divider( modifier = Modifier.padding(horizontal = 14.dp), - color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f) + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f) ) } @@ -217,7 +206,6 @@ fun PreviewHomeScreen() { posts = PostsRepository().getPosts(), navigateToArticle = { /*TODO*/ }, openDrawer = { /*TODO*/ }, - scaffoldState = rememberScaffoldState() ) } } diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt index 12be12347..8fe29a6b6 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt @@ -25,18 +25,17 @@ 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.material.AlertDialog -import androidx.compose.material.Card -import androidx.compose.material.ContentAlpha -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.Icon -import androidx.compose.material.IconButton -import androidx.compose.material.LocalContentAlpha -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Surface -import androidx.compose.material.Text +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.Card +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Close +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.LocalContentColor import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.getValue @@ -99,10 +98,10 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) { .weight(1f) .padding(top = 16.dp, bottom = 16.dp) ) { - Text(post.title, style = MaterialTheme.typography.subtitle1) + Text(post.title, style = MaterialTheme.typography.titleMedium) Row(Modifier.padding(top = 4.dp)) { - CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { - val textStyle = MaterialTheme.typography.body2 + CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) { + val textStyle = MaterialTheme.typography.bodyMedium Text( text = post.metadata.author.name, style = textStyle @@ -114,7 +113,7 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) { } } } - CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { + CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) { // Step 1: Touch target size IconButton( // Step 3: Custom actions @@ -135,20 +134,20 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) { title = { Text( text = stringResource(id = R.string.fewer_stories), - style = MaterialTheme.typography.h6 + style = MaterialTheme.typography.titleLarge ) }, text = { Text( text = stringResource(id = R.string.fewer_stories_content), - style = MaterialTheme.typography.body1 + style = MaterialTheme.typography.bodyLarge ) }, confirmButton = { Text( text = stringResource(id = R.string.agree), - style = MaterialTheme.typography.button, - color = MaterialTheme.colors.primary, + style = MaterialTheme.typography.labelLarge, + color = MaterialTheme.colorScheme.primary, modifier = Modifier .padding(15.dp) .clickable { openDialog = false } @@ -158,7 +157,6 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) { } } -@OptIn(ExperimentalMaterialApi::class) @Composable fun PostCardPopular( post: Post, @@ -168,11 +166,13 @@ fun PostCardPopular( // Step 2: Click labels val readArticleLabel = stringResource(id = R.string.action_read_article) Card( + colors = CardDefaults.cardColors(), shape = MaterialTheme.shapes.medium, modifier = modifier .size(280.dp, 240.dp) .semantics { onClick(label = readArticleLabel, action = null) }, - onClick = { navigateToArticle(post.id) } + onClick = { navigateToArticle(post.id) }, + elevation = CardDefaults.elevatedCardElevation() ) { Column { @@ -188,7 +188,7 @@ fun PostCardPopular( Column(modifier = Modifier.padding(16.dp)) { Text( text = post.title, - style = MaterialTheme.typography.h6, + style = MaterialTheme.typography.titleLarge, maxLines = 2, overflow = TextOverflow.Ellipsis ) @@ -196,7 +196,7 @@ fun PostCardPopular( text = post.metadata.author.name, maxLines = 1, overflow = TextOverflow.Ellipsis, - style = MaterialTheme.typography.body2 + style = MaterialTheme.typography.bodyMedium ) Text( @@ -207,7 +207,7 @@ fun PostCardPopular( post.metadata.readTimeMinutes ) ), - style = MaterialTheme.typography.body2 + style = MaterialTheme.typography.bodyMedium ) } } diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt index 1506eb260..2e5c454f1 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt @@ -27,15 +27,13 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.selection.toggleable import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Checkbox -import androidx.compose.material.Divider -import androidx.compose.material.Icon -import androidx.compose.material.IconButton -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Scaffold -import androidx.compose.material.ScaffoldState -import androidx.compose.material.Text -import androidx.compose.material.rememberScaffoldState +import androidx.compose.material3.Checkbox +import androidx.compose.material3.Divider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -64,14 +62,12 @@ import kotlinx.coroutines.launch * * @param interestsRepository data source for this screen * @param openDrawer (event) request opening the app drawer - * @param scaffoldState (state) state for screen Scaffold */ @Composable fun InterestsScreen( interestsRepository: InterestsRepository, openDrawer: () -> Unit, modifier: Modifier = Modifier, - scaffoldState: ScaffoldState = rememberScaffoldState() ) { // Returns a [CoroutineScope] that is scoped to the lifecycle of [InterestsScreen]. When this // screen is removed from composition, the scope will be cancelled. @@ -88,7 +84,6 @@ fun InterestsScreen( onTopicSelect = onTopicSelect, openDrawer = openDrawer, modifier = modifier, - scaffoldState = scaffoldState ) } @@ -99,7 +94,6 @@ fun InterestsScreen( * @param selectedTopics (state) currently selected topics * @param onTopicSelect (event) request a topic selection be changed * @param openDrawer (event) request opening the app drawer - * @param scaffoldState (state) the state for the screen's [Scaffold] */ @Composable fun InterestsScreen( @@ -107,11 +101,9 @@ fun InterestsScreen( selectedTopics: Set, onTopicSelect: (TopicSelection) -> Unit, openDrawer: () -> Unit, - scaffoldState: ScaffoldState, modifier: Modifier = Modifier ) { Scaffold( - scaffoldState = scaffoldState, topBar = { InsetAwareTopAppBar( title = { Text("Interests") }, @@ -135,7 +127,7 @@ fun InterestsScreen( text = section, modifier = Modifier .padding(16.dp), - style = MaterialTheme.typography.subtitle1 + style = MaterialTheme.typography.titleMedium ) } items(topics) { topic -> @@ -194,7 +186,7 @@ private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit modifier = Modifier .align(Alignment.CenterVertically) .padding(16.dp), - style = MaterialTheme.typography.subtitle1 + style = MaterialTheme.typography.titleMedium ) Spacer(Modifier.weight(1f)) Checkbox( @@ -213,7 +205,7 @@ private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit private fun TopicDivider() { Divider( modifier = Modifier.padding(start = 90.dp), - color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f) + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f) ) } diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt index 92b4e84bb..34825b8b9 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt @@ -23,3 +23,5 @@ val Red300 = Color(0xffea6d7e) val Red700 = Color(0xffdd0d3c) val Red800 = Color(0xffd00036) val Red900 = Color(0xffc20029) + +val DarkGray200 = Color(0xFF2A2A2A) \ No newline at end of file diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt index 9a5a36823..10c00e956 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt @@ -17,7 +17,7 @@ package com.example.jetnews.ui.theme import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Shapes +import androidx.compose.material3.Shapes import androidx.compose.ui.unit.dp val JetnewsShapes = Shapes( diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt index f0ca9c932..7391789f9 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt @@ -17,26 +17,28 @@ package com.example.jetnews.ui.theme import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material.MaterialTheme -import androidx.compose.material.darkColors -import androidx.compose.material.lightColors +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color -private val LightThemeColors = lightColors( +private val LightThemeColors = lightColorScheme( primary = Red700, - primaryVariant = Red900, + primaryContainer = Red900, + surface = Red700, onPrimary = Color.White, secondary = Red700, - secondaryVariant = Red900, + secondaryContainer = Red900, onSecondary = Color.White, error = Red800 ) -private val DarkThemeColors = darkColors( +private val DarkThemeColors = darkColorScheme( primary = Red300, - primaryVariant = Red700, - onPrimary = Color.Black, + primaryContainer = Red700, + surface = DarkGray200, + onPrimary = Color.White, secondary = Red300, onSecondary = Color.Black, error = Red200 @@ -48,7 +50,7 @@ fun JetnewsTheme( content: @Composable () -> Unit ) { MaterialTheme( - colors = if (darkTheme) DarkThemeColors else LightThemeColors, + colorScheme = if (darkTheme) DarkThemeColors else LightThemeColors, typography = JetnewsTypography, shapes = JetnewsShapes, content = content diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt index dce5f7faf..155788514 100644 --- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt +++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt @@ -16,7 +16,7 @@ package com.example.jetnews.ui.theme -import androidx.compose.material.Typography +import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily @@ -36,54 +36,62 @@ private val Domine = FontFamily( ) val JetnewsTypography = Typography( - defaultFontFamily = Montserrat, - h4 = TextStyle( + headlineMedium = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.SemiBold, fontSize = 30.sp, letterSpacing = 0.sp ), - h5 = TextStyle( + headlineSmall = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.SemiBold, fontSize = 24.sp, letterSpacing = 0.sp ), - h6 = TextStyle( + titleLarge = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.SemiBold, fontSize = 20.sp, letterSpacing = 0.sp ), - subtitle1 = TextStyle( + titleMedium = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, letterSpacing = 0.15.sp ), - subtitle2 = TextStyle( + titleSmall = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.Medium, fontSize = 14.sp, letterSpacing = 0.1.sp ), - body1 = TextStyle( + bodyLarge = TextStyle( fontFamily = Domine, fontWeight = FontWeight.Normal, fontSize = 16.sp, letterSpacing = 0.5.sp ), - body2 = TextStyle( + bodyMedium = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.Medium, fontSize = 14.sp, letterSpacing = 0.25.sp ), - button = TextStyle( + labelLarge = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, letterSpacing = 1.25.sp ), - caption = TextStyle( + bodySmall = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.Medium, fontSize = 12.sp, letterSpacing = 0.4.sp ), - overline = TextStyle( + labelSmall = TextStyle( + fontFamily = Montserrat, fontWeight = FontWeight.SemiBold, fontSize = 12.sp, letterSpacing = 1.sp diff --git a/AccessibilityCodelab/app/src/main/res/values/styles.xml b/AccessibilityCodelab/app/src/main/res/values/styles.xml index ba3bc3e7e..b895f2796 100644 --- a/AccessibilityCodelab/app/src/main/res/values/styles.xml +++ b/AccessibilityCodelab/app/src/main/res/values/styles.xml @@ -17,7 +17,7 @@ -