Skip to content

Commit 3e5afc9

Browse files
simona-anomissimona-anomis
authored
Migrate Accessibility and Migration codelab end to M3 (#491)
* Migrate Accessibility codelab end to M3 * Migrate Migration codelab end to M3
1 parent 9d10fa2 commit 3e5afc9

File tree

18 files changed

+193
-189
lines changed

18 files changed

+193
-189
lines changed

‎AccessibilityCodelab/app/build.gradle‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ dependencies {
7878
implementation "androidx.compose.runtime:runtime"
7979
implementation "androidx.compose.ui:ui"
8080
implementation "androidx.compose.foundation:foundation-layout"
81-
implementation "androidx.compose.material:material"
81+
implementation "androidx.compose.material3:material3"
8282
implementation "androidx.compose.material:material-icons-extended"
8383
implementation "androidx.compose.foundation:foundation"
8484
implementation "androidx.compose.animation:animation"
@@ -94,8 +94,6 @@ dependencies {
9494
implementation "com.google.accompanist:accompanist-swiperefresh:$accompanist_version"
9595
implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
9696

97-
implementation "com.google.android.material:material:1.12.0"
98-
9997
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1"
10098

10199
implementation 'androidx.appcompat:appcompat:1.7.0'

‎AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
2727
import androidx.compose.foundation.layout.height
2828
import androidx.compose.foundation.layout.padding
2929
import androidx.compose.foundation.layout.width
30-
import androidx.compose.material.Divider
31-
import androidx.compose.material.MaterialTheme
32-
import androidx.compose.material.Surface
33-
import androidx.compose.material.Text
34-
import androidx.compose.material.TextButton
30+
import androidx.compose.material3.Divider
31+
import androidx.compose.material3.MaterialTheme
32+
import androidx.compose.material3.Surface
33+
import androidx.compose.material3.Text
34+
import androidx.compose.material3.TextButton
3535
import androidx.compose.material.icons.Icons
3636
import androidx.compose.material.icons.filled.Home
3737
import androidx.compose.material.icons.filled.ListAlt
@@ -58,7 +58,7 @@ fun AppDrawer(
5858
Column(modifier = Modifier.fillMaxSize()) {
5959
Spacer(Modifier.height(24.dp))
6060
JetNewsLogo(Modifier.padding(16.dp))
61-
Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f))
61+
Divider(color = MaterialTheme.colorScheme.onSurface.copy(alpha = .2f))
6262
DrawerButton(
6363
icon = Icons.Filled.Home,
6464
label = "Home",
@@ -87,13 +87,13 @@ private fun JetNewsLogo(modifier: Modifier = Modifier) {
8787
Image(
8888
painter = painterResource(R.drawable.ic_jetnews_logo),
8989
contentDescription = null,
90-
colorFilter = ColorFilter.tint(MaterialTheme.colors.primary)
90+
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
9191
)
9292
Spacer(Modifier.width(8.dp))
9393
Image(
9494
painter = painterResource(R.drawable.ic_jetnews_wordmark),
9595
contentDescription = null,
96-
colorFilter = ColorFilter.tint(MaterialTheme.colors.onSurface)
96+
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface)
9797
)
9898
}
9999
}
@@ -106,7 +106,7 @@ private fun DrawerButton(
106106
action: () -> Unit,
107107
modifier: Modifier = Modifier
108108
) {
109-
val colors = MaterialTheme.colors
109+
val colors = MaterialTheme.colorScheme
110110
val imageAlpha = if (isSelected) {
111111
1f
112112
} else {
@@ -149,7 +149,7 @@ private fun DrawerButton(
149149
Spacer(Modifier.width(16.dp))
150150
Text(
151151
text = label,
152-
style = MaterialTheme.typography.body2,
152+
style = MaterialTheme.typography.bodyMedium,
153153
color = textIconColor
154154
)
155155
}

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

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,28 @@
1717
package com.example.jetnews.ui
1818

1919
import android.annotation.SuppressLint
20-
import androidx.compose.material.Scaffold
21-
import androidx.compose.material.rememberScaffoldState
20+
import androidx.compose.foundation.layout.WindowInsets
21+
import androidx.compose.foundation.layout.width
22+
import androidx.compose.material3.DrawerValue
23+
import androidx.compose.material3.ModalDrawerSheet
24+
import androidx.compose.material3.ModalNavigationDrawer
25+
import androidx.compose.material3.Scaffold
26+
import androidx.compose.material3.rememberDrawerState
2227
import androidx.compose.runtime.Composable
2328
import androidx.compose.runtime.SideEffect
2429
import androidx.compose.runtime.getValue
2530
import androidx.compose.runtime.rememberCoroutineScope
31+
import androidx.compose.ui.Modifier
2632
import androidx.compose.ui.graphics.Color
33+
import androidx.compose.ui.unit.dp
2734
import androidx.navigation.compose.currentBackStackEntryAsState
2835
import androidx.navigation.compose.rememberNavController
2936
import com.example.jetnews.data.AppContainer
3037
import com.example.jetnews.ui.theme.JetnewsTheme
3138
import com.google.accompanist.systemuicontroller.rememberSystemUiController
3239
import kotlinx.coroutines.launch
3340

34-
@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
41+
@SuppressLint("UnusedMaterialScaffoldPaddingParameter", "UnusedMaterial3ScaffoldPaddingParameter")
3542
@Composable
3643
fun JetnewsApp(
3744
appContainer: AppContainer
@@ -44,29 +51,34 @@ fun JetnewsApp(
4451

4552
val navController = rememberNavController()
4653
val coroutineScope = rememberCoroutineScope()
47-
// This top level scaffold contains the app drawer, which needs to be accessible
48-
// from multiple screens. An event to open the drawer is passed down to each
49-
// screen that needs it.
50-
val scaffoldState = rememberScaffoldState()
5154

5255
val navBackStackEntry by navController.currentBackStackEntryAsState()
5356
val currentRoute = navBackStackEntry?.destination?.route ?: MainDestinations.HOME_ROUTE
54-
Scaffold(
55-
scaffoldState = scaffoldState,
57+
58+
val drawerState = rememberDrawerState(DrawerValue.Closed)
59+
val scope = rememberCoroutineScope()
60+
61+
ModalNavigationDrawer(
62+
drawerState = drawerState,
5663
drawerContent = {
57-
AppDrawer(
58-
currentRoute = currentRoute,
59-
navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) },
60-
navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) },
61-
closeDrawer = { coroutineScope.launch { scaffoldState.drawerState.close() } }
62-
)
64+
ModalDrawerSheet(modifier = Modifier.width(300.dp), windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp)) {
65+
AppDrawer(
66+
currentRoute = currentRoute,
67+
navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) },
68+
navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) },
69+
closeDrawer = { coroutineScope.launch { drawerState.close() } }
70+
)
71+
}
72+
},
73+
content = {
74+
Scaffold {
75+
JetnewsNavGraph(
76+
appContainer = appContainer,
77+
navController = navController,
78+
drawerState = drawerState
79+
)
80+
}
6381
}
64-
) {
65-
JetnewsNavGraph(
66-
appContainer = appContainer,
67-
navController = navController,
68-
scaffoldState = scaffoldState
69-
)
70-
}
82+
)
7183
}
7284
}

‎AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616

1717
package com.example.jetnews.ui
1818

19-
import androidx.compose.material.ScaffoldState
20-
import androidx.compose.material.rememberScaffoldState
19+
import androidx.compose.material3.DrawerState
20+
import androidx.compose.material3.DrawerValue
21+
import androidx.compose.material3.rememberDrawerState
2122
import androidx.compose.runtime.Composable
2223
import androidx.compose.runtime.remember
2324
import androidx.compose.runtime.rememberCoroutineScope
@@ -46,12 +47,12 @@ object MainDestinations {
4647
fun JetnewsNavGraph(
4748
appContainer: AppContainer,
4849
navController: NavHostController = rememberNavController(),
49-
scaffoldState: ScaffoldState = rememberScaffoldState(),
50+
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
5051
startDestination: String = MainDestinations.HOME_ROUTE
5152
) {
5253
val actions = remember(navController) { MainActions(navController) }
5354
val coroutineScope = rememberCoroutineScope()
54-
val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } }
55+
val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } }
5556

5657
NavHost(
5758
navController = navController,

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ package com.example.jetnews.ui.article
1818

1919
import android.content.res.Configuration.UI_MODE_NIGHT_YES
2020
import androidx.compose.foundation.layout.padding
21-
import androidx.compose.material.AlertDialog
22-
import androidx.compose.material.Icon
23-
import androidx.compose.material.IconButton
24-
import androidx.compose.material.LocalContentColor
25-
import androidx.compose.material.MaterialTheme
26-
import androidx.compose.material.Scaffold
27-
import androidx.compose.material.Text
28-
import androidx.compose.material.TextButton
21+
import androidx.compose.material3.AlertDialog
22+
import androidx.compose.material3.Icon
23+
import androidx.compose.material3.IconButton
24+
import androidx.compose.material3.LocalContentColor
25+
import androidx.compose.material3.MaterialTheme
26+
import androidx.compose.material3.Scaffold
27+
import androidx.compose.material3.Text
28+
import androidx.compose.material3.TextButton
2929
import androidx.compose.material.icons.Icons
3030
import androidx.compose.material.icons.filled.ArrowBack
3131
import androidx.compose.runtime.Composable
@@ -90,7 +90,7 @@ fun ArticleScreen(
9090
title = {
9191
Text(
9292
text = "Published in: ${post.publication?.name}",
93-
style = MaterialTheme.typography.subtitle2,
93+
style = MaterialTheme.typography.titleSmall,
9494
color = LocalContentColor.current
9595
)
9696
},
@@ -131,7 +131,7 @@ private fun FunctionalityNotAvailablePopup(onDismiss: () -> Unit) {
131131
text = {
132132
Text(
133133
text = "Functionality not available \uD83D\uDE48",
134-
style = MaterialTheme.typography.body2
134+
style = MaterialTheme.typography.bodyMedium
135135
)
136136
},
137137
confirmButton = {

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

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,14 @@ import androidx.compose.foundation.layout.width
3232
import androidx.compose.foundation.lazy.LazyColumn
3333
import androidx.compose.foundation.lazy.items
3434
import androidx.compose.foundation.shape.CircleShape
35-
import androidx.compose.material.Colors
36-
import androidx.compose.material.ContentAlpha
37-
import androidx.compose.material.LocalContentAlpha
38-
import androidx.compose.material.LocalContentColor
39-
import androidx.compose.material.MaterialTheme
40-
import androidx.compose.material.Surface
41-
import androidx.compose.material.Text
42-
import androidx.compose.material.Typography
35+
import androidx.compose.material3.LocalContentColor
36+
import androidx.compose.material3.MaterialTheme
37+
import androidx.compose.material3.Surface
38+
import androidx.compose.material3.Text
39+
import androidx.compose.material3.Typography
4340
import androidx.compose.material.icons.Icons
4441
import androidx.compose.material.icons.filled.AccountCircle
42+
import androidx.compose.material3.ColorScheme
4543
import androidx.compose.runtime.Composable
4644
import androidx.compose.runtime.CompositionLocalProvider
4745
import androidx.compose.ui.Modifier
@@ -88,15 +86,15 @@ fun PostContent(post: Post, modifier: Modifier = Modifier) {
8886
PostHeaderImage(post)
8987
}
9088
item {
91-
Text(text = post.title, style = MaterialTheme.typography.h4)
89+
Text(text = post.title, style = MaterialTheme.typography.headlineMedium)
9290
Spacer(Modifier.height(8.dp))
9391
}
9492
post.subtitle?.let { subtitle ->
9593
item {
96-
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
94+
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
9795
Text(
9896
text = subtitle,
99-
style = MaterialTheme.typography.body2,
97+
style = MaterialTheme.typography.bodyMedium,
10098
lineHeight = 20.sp
10199
)
102100
}
@@ -147,14 +145,14 @@ private fun PostMetadata(metadata: Metadata) {
147145
Column {
148146
Text(
149147
text = metadata.author.name,
150-
style = typography.caption,
148+
style = typography.bodySmall,
151149
modifier = Modifier.padding(top = 4.dp)
152150
)
153151

154-
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
152+
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
155153
Text(
156154
text = "${metadata.date} • ${metadata.readTimeMinutes} min read",
157-
style = typography.caption
155+
style = typography.bodySmall
158156
)
159157
}
160158
}
@@ -168,7 +166,7 @@ private fun Paragraph(paragraph: Paragraph) {
168166
val annotatedString = paragraphToAnnotatedString(
169167
paragraph,
170168
MaterialTheme.typography,
171-
MaterialTheme.colors.codeBlockBackground
169+
MaterialTheme.colorScheme.codeBlockBackground
172170
)
173171
Box(modifier = Modifier.padding(bottom = trailingPadding)) {
174172
when (paragraph.type) {
@@ -207,7 +205,7 @@ private fun CodeBlockParagraph(
207205
paragraphStyle: ParagraphStyle
208206
) {
209207
Surface(
210-
color = MaterialTheme.colors.codeBlockBackground,
208+
color = MaterialTheme.colorScheme.codeBlockBackground,
211209
shape = MaterialTheme.shapes.small,
212210
modifier = Modifier.fillMaxWidth()
213211
) {
@@ -257,29 +255,29 @@ private data class ParagraphStyling(
257255
@Composable
258256
private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling {
259257
val typography = MaterialTheme.typography
260-
var textStyle: TextStyle = typography.body1
258+
var textStyle: TextStyle = typography.bodyLarge
261259
var paragraphStyle = ParagraphStyle()
262260
var trailingPadding = 24.dp
263261

264262
when (this) {
265-
ParagraphType.Caption -> textStyle = typography.body1
266-
ParagraphType.Title -> textStyle = typography.h4
263+
ParagraphType.Caption -> textStyle = typography.bodyLarge
264+
ParagraphType.Title -> textStyle = typography.headlineMedium
267265
ParagraphType.Subhead -> {
268-
textStyle = typography.h6
266+
textStyle = typography.titleLarge
269267
trailingPadding = 16.dp
270268
}
271269
ParagraphType.Text -> {
272-
textStyle = typography.body1.copy(lineHeight = 28.sp)
270+
textStyle = typography.bodyLarge.copy(lineHeight = 28.sp)
273271
paragraphStyle = paragraphStyle.copy(lineHeight = 28.sp)
274272
}
275273
ParagraphType.Header -> {
276-
textStyle = typography.h5
274+
textStyle = typography.headlineSmall
277275
trailingPadding = 16.dp
278276
}
279-
ParagraphType.CodeBlock -> textStyle = typography.body1.copy(
277+
ParagraphType.CodeBlock -> textStyle = typography.bodyLarge.copy(
280278
fontFamily = FontFamily.Monospace
281279
)
282-
ParagraphType.Quote -> textStyle = typography.body1
280+
ParagraphType.Quote -> textStyle = typography.bodyLarge
283281
ParagraphType.Bullet -> {
284282
paragraphStyle = ParagraphStyle(textIndent = TextIndent(firstLine = 8.sp))
285283
}
@@ -308,28 +306,28 @@ fun Markup.toAnnotatedStringItem(
308306
return when (this.type) {
309307
MarkupType.Italic -> {
310308
AnnotatedString.Range(
311-
typography.body1.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
309+
typography.bodyLarge.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
312310
start,
313311
end
314312
)
315313
}
316314
MarkupType.Link -> {
317315
AnnotatedString.Range(
318-
typography.body1.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
316+
typography.bodyLarge.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
319317
start,
320318
end
321319
)
322320
}
323321
MarkupType.Bold -> {
324322
AnnotatedString.Range(
325-
typography.body1.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
323+
typography.bodyLarge.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
326324
start,
327325
end
328326
)
329327
}
330328
MarkupType.Code -> {
331329
AnnotatedString.Range(
332-
typography.body1
330+
typography.bodyLarge
333331
.copy(
334332
background = codeBlockBackground,
335333
fontFamily = FontFamily.Monospace
@@ -341,7 +339,7 @@ fun Markup.toAnnotatedStringItem(
341339
}
342340
}
343341

344-
private val Colors.codeBlockBackground: Color
342+
private val ColorScheme.codeBlockBackground: Color
345343
get() = onSurface.copy(alpha = .15f)
346344

347345
@Preview("Post content")

0 commit comments

Comments
 (0)