Skip to content

Commit 42469ad

Browse files
simona-anomissimona-anomis
committed
Migrate Accessibility codelab main to M3
1 parent 718b7e7 commit 42469ad

File tree

14 files changed

+181
-173
lines changed

14 files changed

+181
-173
lines changed

‎AccessibilityCodelab/app/build.gradle

+2-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,8 @@ dependencies {
9595
implementation "androidx.compose.runtime:runtime"
9696
implementation "androidx.compose.ui:ui"
9797
implementation "androidx.compose.foundation:foundation-layout"
98-
implementation "androidx.compose.material:material"
98+
// implementation "androidx.compose.material:material"
99+
implementation "androidx.compose.material3:material3"
99100
implementation "androidx.compose.material:material-icons-extended"
100101
implementation "androidx.compose.foundation:foundation"
101102
implementation "androidx.compose.animation:animation"

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ package com.example.jetnews.ui
1818

1919
import android.content.res.Configuration.UI_MODE_NIGHT_YES
2020
import androidx.compose.foundation.Image
21+
import androidx.compose.foundation.background
2122
import androidx.compose.foundation.layout.Arrangement
2223
import androidx.compose.foundation.layout.Column
2324
import androidx.compose.foundation.layout.Row
@@ -27,11 +28,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
2728
import androidx.compose.foundation.layout.height
2829
import androidx.compose.foundation.layout.padding
2930
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
31+
import androidx.compose.material3.Divider
32+
import androidx.compose.material3.MaterialTheme
33+
import androidx.compose.material3.Surface
34+
import androidx.compose.material3.Text
35+
import androidx.compose.material3.TextButton
3536
import androidx.compose.material.icons.Icons
3637
import androidx.compose.material.icons.filled.Home
3738
import androidx.compose.material.icons.filled.ListAlt
@@ -54,11 +55,10 @@ fun AppDrawer(
5455
navigateToInterests: () -> Unit,
5556
closeDrawer: () -> Unit
5657
) {
57-
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

+34-22
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("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

+6-4
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@
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
25+
import androidx.compose.ui.Modifier
2426
import androidx.navigation.NavHostController
2527
import androidx.navigation.compose.NavHost
2628
import androidx.navigation.compose.composable
@@ -46,12 +48,12 @@ object MainDestinations {
4648
fun JetnewsNavGraph(
4749
appContainer: AppContainer,
4850
navController: NavHostController = rememberNavController(),
49-
scaffoldState: ScaffoldState = rememberScaffoldState(),
51+
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
5052
startDestination: String = MainDestinations.HOME_ROUTE
5153
) {
5254
val actions = remember(navController) { MainActions(navController) }
5355
val coroutineScope = rememberCoroutineScope()
54-
val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } }
56+
val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } }
5557

5658
NavHost(
5759
navController = navController,

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

+10-11
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,15 @@
1717
package com.example.jetnews.ui.article
1818

1919
import android.content.res.Configuration.UI_MODE_NIGHT_YES
20-
import androidx.compose.foundation.layout.navigationBarsPadding
2120
import androidx.compose.foundation.layout.padding
22-
import androidx.compose.material.AlertDialog
23-
import androidx.compose.material.Icon
24-
import androidx.compose.material.IconButton
25-
import androidx.compose.material.LocalContentColor
26-
import androidx.compose.material.MaterialTheme
27-
import androidx.compose.material.Scaffold
28-
import androidx.compose.material.Text
29-
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
3029
import androidx.compose.material.icons.Icons
3130
import androidx.compose.material.icons.filled.ArrowBack
3231
import androidx.compose.runtime.Composable
@@ -89,7 +88,7 @@ fun ArticleScreen(
8988
title = {
9089
Text(
9190
text = "Published in: ${post.publication?.name}",
92-
style = MaterialTheme.typography.subtitle2,
91+
style = MaterialTheme.typography.titleSmall,
9392
color = LocalContentColor.current
9493
)
9594
},
@@ -127,7 +126,7 @@ private fun FunctionalityNotAvailablePopup(onDismiss: () -> Unit) {
127126
text = {
128127
Text(
129128
text = "Functionality not available \uD83D\uDE48",
130-
style = MaterialTheme.typography.body2
129+
style = MaterialTheme.typography.bodyMedium
131130
)
132131
},
133132
confirmButton = {

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

+27-29
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,12 @@ 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.ColorScheme
36+
import androidx.compose.material3.LocalContentColor
37+
import androidx.compose.material3.MaterialTheme
38+
import androidx.compose.material3.Surface
39+
import androidx.compose.material3.Text
40+
import androidx.compose.material3.Typography
4341
import androidx.compose.material.icons.Icons
4442
import androidx.compose.material.icons.filled.AccountCircle
4543
import androidx.compose.runtime.Composable
@@ -86,15 +84,15 @@ fun PostContent(post: Post, modifier: Modifier = Modifier) {
8684
PostHeaderImage(post)
8785
}
8886
item {
89-
Text(text = post.title, style = MaterialTheme.typography.h4)
87+
Text(text = post.title, style = MaterialTheme.typography.headlineMedium)
9088
Spacer(Modifier.height(8.dp))
9189
}
9290
post.subtitle?.let { subtitle ->
9391
item {
94-
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
92+
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
9593
Text(
9694
text = subtitle,
97-
style = MaterialTheme.typography.body2,
95+
style = MaterialTheme.typography.bodyMedium,
9896
lineHeight = 20.sp
9997
)
10098
}
@@ -144,14 +142,14 @@ private fun PostMetadata(metadata: Metadata) {
144142
Column {
145143
Text(
146144
text = metadata.author.name,
147-
style = typography.caption,
145+
style = typography.bodySmall,
148146
modifier = Modifier.padding(top = 4.dp)
149147
)
150148

151-
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
149+
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
152150
Text(
153151
text = "${metadata.date} • ${metadata.readTimeMinutes} min read",
154-
style = typography.caption
152+
style = typography.bodySmall
155153
)
156154
}
157155
}
@@ -165,7 +163,7 @@ private fun Paragraph(paragraph: Paragraph) {
165163
val annotatedString = paragraphToAnnotatedString(
166164
paragraph,
167165
MaterialTheme.typography,
168-
MaterialTheme.colors.codeBlockBackground
166+
MaterialTheme.colorScheme.codeBlockBackground
169167
)
170168
Box(modifier = Modifier.padding(bottom = trailingPadding)) {
171169
when (paragraph.type) {
@@ -202,7 +200,7 @@ private fun CodeBlockParagraph(
202200
paragraphStyle: ParagraphStyle
203201
) {
204202
Surface(
205-
color = MaterialTheme.colors.codeBlockBackground,
203+
color = MaterialTheme.colorScheme.codeBlockBackground,
206204
shape = MaterialTheme.shapes.small,
207205
modifier = Modifier.fillMaxWidth()
208206
) {
@@ -252,29 +250,29 @@ private data class ParagraphStyling(
252250
@Composable
253251
private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling {
254252
val typography = MaterialTheme.typography
255-
var textStyle: TextStyle = typography.body1
253+
var textStyle: TextStyle = typography.bodyLarge
256254
var paragraphStyle = ParagraphStyle()
257255
var trailingPadding = 24.dp
258256

259257
when (this) {
260-
ParagraphType.Caption -> textStyle = typography.body1
261-
ParagraphType.Title -> textStyle = typography.h4
258+
ParagraphType.Caption -> textStyle = typography.bodyLarge
259+
ParagraphType.Title -> textStyle = typography.headlineMedium
262260
ParagraphType.Subhead -> {
263-
textStyle = typography.h6
261+
textStyle = typography.titleLarge
264262
trailingPadding = 16.dp
265263
}
266264
ParagraphType.Text -> {
267-
textStyle = typography.body1.copy(lineHeight = 28.sp)
265+
textStyle = typography.bodyLarge.copy(lineHeight = 28.sp)
268266
paragraphStyle = paragraphStyle.copy(lineHeight = 28.sp)
269267
}
270268
ParagraphType.Header -> {
271-
textStyle = typography.h5
269+
textStyle = typography.headlineSmall
272270
trailingPadding = 16.dp
273271
}
274-
ParagraphType.CodeBlock -> textStyle = typography.body1.copy(
272+
ParagraphType.CodeBlock -> textStyle = typography.bodyLarge.copy(
275273
fontFamily = FontFamily.Monospace
276274
)
277-
ParagraphType.Quote -> textStyle = typography.body1
275+
ParagraphType.Quote -> textStyle = typography.bodyLarge
278276
ParagraphType.Bullet -> {
279277
paragraphStyle = ParagraphStyle(textIndent = TextIndent(firstLine = 8.sp))
280278
}
@@ -303,28 +301,28 @@ fun Markup.toAnnotatedStringItem(
303301
return when (this.type) {
304302
MarkupType.Italic -> {
305303
AnnotatedString.Range(
306-
typography.body1.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
304+
typography.bodyLarge.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
307305
start,
308306
end
309307
)
310308
}
311309
MarkupType.Link -> {
312310
AnnotatedString.Range(
313-
typography.body1.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
311+
typography.bodyLarge.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
314312
start,
315313
end
316314
)
317315
}
318316
MarkupType.Bold -> {
319317
AnnotatedString.Range(
320-
typography.body1.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
318+
typography.bodyLarge.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
321319
start,
322320
end
323321
)
324322
}
325323
MarkupType.Code -> {
326324
AnnotatedString.Range(
327-
typography.body1
325+
typography.bodyLarge
328326
.copy(
329327
background = codeBlockBackground,
330328
fontFamily = FontFamily.Monospace
@@ -336,7 +334,7 @@ fun Markup.toAnnotatedStringItem(
336334
}
337335
}
338336

339-
private val Colors.codeBlockBackground: Color
337+
private val ColorScheme.codeBlockBackground: Color
340338
get() = onSurface.copy(alpha = .15f)
341339

342340
@Preview("Post content")

0 commit comments

Comments
 (0)