[Jetsurvey] Converted to use Material 3 (android#954)

This updates Jetsurvey from Material 2 to Material 3. All Compose components now use Material 3 instead of Material 2. The date picker is currently still using the MaterialDatePicker DialogFragment the same as before this change. This also fixes the visibility of the status bars when in light mode and updates the screenshot and animated gif.

Before: https://raw.githubusercontent.com/android/compose-samples/70d05efe9c5de6d3788ac3c6023caa20761d410a/Jetsurvey/screenshots/survey.gif
After: https://raw.githubusercontent.com/android/compose-samples/ede93fc907ad32c61bd7f3d55a33af48e782ea2a/Jetsurvey/screenshots/survey.gif

Co-authored-by: Ian G. Clifton <IanGClifton@users.noreply.github.com>

Author: IanGClifton

Diff for: Jetsurvey/app/build.gradle.kts

@@ -75,14 +75,15 @@ dependencies {
     implementation(libs.google.android.material)
 
     implementation(libs.androidx.compose.foundation.layout)
-    implementation(libs.androidx.compose.material)
+    implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.material.iconsExtended)
     implementation(libs.androidx.compose.ui.tooling.preview)
     implementation(libs.androidx.compose.runtime)
     implementation(libs.androidx.compose.runtime.livedata)
     debugImplementation(libs.androidx.compose.ui.tooling)
 
     implementation(libs.accompanist.permissions)
+    implementation(libs.accompanist.systemuicontroller)
 
     implementation(libs.coil.kt.compose)
 

Diff for: Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInScreen.kt

@@ -16,6 +16,8 @@
 
 package com.example.compose.jetsurvey.signinsignup
 
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -24,15 +26,15 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material.Button
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Snackbar
-import androidx.compose.material.SnackbarHost
-import androidx.compose.material.SnackbarHostState
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Snackbar
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -48,7 +50,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.theme.JetsurveyTheme
-import com.example.compose.jetsurvey.theme.snackbarAction
 import com.example.compose.jetsurvey.util.supportWideScreen
 import kotlinx.coroutines.launch
 
@@ -59,7 +60,7 @@ sealed class SignInEvent {
     object NavigateBack : SignInEvent()
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class) // Scaffold is experimental in m3
 @Composable
 fun SignIn(onNavigationEvent: (SignInEvent) -> Unit) {
 
@@ -157,7 +158,6 @@ fun SignInContent(
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun ErrorSnackbar(
     snackbarHostState: SnackbarHostState,
@@ -171,16 +171,16 @@ fun ErrorSnackbar(
                 modifier = Modifier.padding(16.dp),
                 content = {
                     Text(
-                        text = data.message,
-                        style = MaterialTheme.typography.body2
+                        text = data.visuals.message,
+                        style = MaterialTheme.typography.bodyMedium,
                     )
                 },
                 action = {
-                    data.actionLabel?.let {
+                    data.visuals.actionLabel?.let {
                         TextButton(onClick = onDismiss) {
                             Text(
                                 text = stringResource(id = R.string.dismiss),
-                                color = MaterialTheme.colors.snackbarAction
+                                color = MaterialTheme.colorScheme.inversePrimary
                             )
                         }
                     }
@@ -193,18 +193,11 @@ fun ErrorSnackbar(
     )
 }
 
-@Preview(name = "Sign in light theme")
+@Preview(name = "Sign in light theme", uiMode = UI_MODE_NIGHT_NO)
+@Preview(name = "Sign in dark theme", uiMode = UI_MODE_NIGHT_YES)
 @Composable
 fun SignInPreview() {
     JetsurveyTheme {
         SignIn {}
     }
 }
-
-@Preview(name = "Sign in dark theme")
-@Composable
-fun SignInPreviewDark() {
-    JetsurveyTheme(darkTheme = true) {
-        SignIn {}
-    }
-}

Diff for: Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInSignUp.kt

@@ -31,24 +31,20 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.LocalTextStyle
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.OutlinedTextField
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ChevronLeft
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -60,17 +56,18 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
+import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 
 @Composable
 fun SignInSignUpScreen(
     onSignedInAsGuest: () -> Unit,
     modifier: Modifier = Modifier,
     contentPadding: PaddingValues = PaddingValues(),
-    content: @Composable() () -> Unit
+    content: @Composable () -> Unit
 ) {
     LazyColumn(
         modifier = modifier,
@@ -96,13 +93,13 @@ fun SignInSignUpScreen(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // CenterAlignedTopAppBar is experimental in m3
 @Composable
 fun SignInSignUpTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
-    TopAppBar(
+    CenterAlignedTopAppBar(
         title = {
             Text(
                 text = topAppBarText,
-                textAlign = TextAlign.Center,
                 modifier = Modifier
                     .fillMaxSize()
                     .wrapContentSize(Alignment.Center)
@@ -112,19 +109,19 @@ fun SignInSignUpTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
             IconButton(onClick = onBackPressed) {
                 Icon(
                     imageVector = Icons.Filled.ChevronLeft,
-                    contentDescription = stringResource(id = R.string.back)
+                    contentDescription = stringResource(id = R.string.back),
+                    tint = MaterialTheme.colorScheme.primary
                 )
             }
         },
         // We need to balance the navigation icon, so we add a spacer.
         actions = {
             Spacer(modifier = Modifier.width(68.dp))
         },
-        backgroundColor = MaterialTheme.colors.surface,
-        elevation = 0.dp
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // OutlinedTextField is experimental in m3
 @Composable
 fun Email(
     emailState: TextFieldState = remember { EmailState() },
@@ -137,12 +134,10 @@ fun Email(
             emailState.text = it
         },
         label = {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = stringResource(id = R.string.email),
-                    style = MaterialTheme.typography.body2
-                )
-            }
+            Text(
+                text = stringResource(id = R.string.email),
+                style = MaterialTheme.typography.bodyMedium,
+            )
         },
         modifier = Modifier
             .fillMaxWidth()
@@ -152,7 +147,7 @@ fun Email(
                     emailState.enableShowErrors()
                 }
             },
-        textStyle = MaterialTheme.typography.body2,
+        textStyle = MaterialTheme.typography.bodyMedium,
         isError = emailState.showErrors(),
         keyboardOptions = KeyboardOptions.Default.copy(
             imeAction = imeAction,
@@ -162,12 +157,13 @@ fun Email(
             onDone = {
                 onImeAction()
             }
-        )
+        ),
     )
 
     emailState.getError()?.let { error -> TextFieldError(textError = error) }
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // OutlinedTextField is experimental in m3
 @Composable
 fun Password(
     label: String,
@@ -191,14 +187,12 @@ fun Password(
                     passwordState.enableShowErrors()
                 }
             },
-        textStyle = MaterialTheme.typography.body2,
+        textStyle = MaterialTheme.typography.bodyMedium,
         label = {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = label,
-                    style = MaterialTheme.typography.body2
-                )
-            }
+            Text(
+                text = label,
+                style = MaterialTheme.typography.bodyMedium,
+            )
         },
         trailingIcon = {
             if (showPassword.value) {
@@ -231,7 +225,7 @@ fun Password(
             onDone = {
                 onImeAction()
             }
-        )
+        ),
     )
 
     passwordState.getError()?.let { error -> TextFieldError(textError = error) }
@@ -247,7 +241,7 @@ fun TextFieldError(textError: String) {
         Text(
             text = textError,
             modifier = Modifier.fillMaxWidth(),
-            style = LocalTextStyle.current.copy(color = MaterialTheme.colors.error)
+            color = MaterialTheme.colorScheme.error
         )
     }
 }
@@ -261,20 +255,17 @@ fun OrSignInAsGuest(
         modifier = modifier,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        Surface {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = stringResource(id = R.string.or),
-                    style = MaterialTheme.typography.subtitle2,
-                    modifier = Modifier.paddingFromBaseline(top = 25.dp)
-                )
-            }
-        }
+        Text(
+            text = stringResource(id = R.string.or),
+            style = MaterialTheme.typography.titleSmall,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = stronglyDeemphasizedAlpha),
+            modifier = Modifier.paddingFromBaseline(top = 25.dp)
+        )
         OutlinedButton(
             onClick = onSignedInAsGuest,
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(top = 20.dp, bottom = 24.dp)
+                .padding(top = 20.dp, bottom = 24.dp),
         ) {
             Text(text = stringResource(id = R.string.sign_in_guest))
         }
@@ -284,8 +275,12 @@ fun OrSignInAsGuest(
 @Preview
 @Composable
 fun SignInSignUpScreenPreview() {
-    SignInSignUpScreen(
-        onSignedInAsGuest = {},
-        content = {}
-    )
+    JetsurveyTheme {
+        Surface {
+            SignInSignUpScreen(
+                onSignedInAsGuest = {},
+                content = {}
+            )
+        }
+    }
 }

Diff for: Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpScreen.kt

@@ -20,14 +20,12 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.material.Button
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
@@ -38,6 +36,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 import com.example.compose.jetsurvey.util.supportWideScreen
 
 sealed class SignUpEvent {
@@ -47,6 +46,7 @@ sealed class SignUpEvent {
     object NavigateBack : SignUpEvent()
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // Scaffold is experimental in m3
 @Composable
 fun SignUp(onNavigationEvent: (SignUpEvent) -> Unit) {
     Scaffold(
@@ -104,12 +104,11 @@ fun SignUpContent(
         )
 
         Spacer(modifier = Modifier.height(16.dp))
-        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-            Text(
-                text = stringResource(id = R.string.terms_and_conditions),
-                style = MaterialTheme.typography.caption
-            )
-        }
+        Text(
+            text = stringResource(id = R.string.terms_and_conditions),
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = stronglyDeemphasizedAlpha)
+        )
 
         Spacer(modifier = Modifier.height(16.dp))
         Button(