Migrating to Material 3 (1)

oblakr24 · Jul 9, 2023 · 652242f · 652242f
1 parent 4e551c8
commit 652242f
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 103 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -9,12 +9,12 @@ plugins {
 
 android {
     namespace 'com.rokoblak.chatbackup'
-    compileSdk 33
+    compileSdk 34
 
     defaultConfig {
         applicationId "com.rokoblak.chatbackup"
         minSdk 29
-        targetSdk 33
+        targetSdk 34
         versionCode 6
         versionName "1.0.3"
 
@@ -85,6 +85,9 @@ dependencies {
     implementation "com.google.accompanist:accompanist-permissions:0.31.2-alpha"
     // Compose extended material icons
     implementation "androidx.compose.material:material-icons-extended:1.4.3"
+    // Compose Material 3
+    implementation platform('androidx.compose:compose-bom:2022.10.00')
+    implementation 'androidx.compose.material3:material3'
     // Coil
     implementation "io.coil-kt:coil-compose:2.2.2"
 

diff --git a/app/src/main/java/com/rokoblak/chatbackup/conversation/ConversationScreen.kt b/app/src/main/java/com/rokoblak/chatbackup/conversation/ConversationScreen.kt
@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
@@ -16,6 +16,7 @@ import com.rokoblak.chatbackup.ui.commonui.ChatDisplayData
 import com.rokoblak.chatbackup.ui.commonui.ChatListing
 import com.rokoblak.chatbackup.ui.commonui.DetailsHeader
 import com.rokoblak.chatbackup.ui.commonui.PreviewDataUtils
+import com.rokoblak.chatbackup.ui.theme.AppThemePreviews
 import com.rokoblak.chatbackup.ui.theme.ChatBackupTheme
 import kotlinx.collections.immutable.ImmutableList
 
@@ -50,15 +51,15 @@ private fun ConversationScreenContent(
         modifier = Modifier
             .fillMaxWidth()
             .fillMaxHeight()
-            .background(MaterialTheme.colors.surface)
+            .background(MaterialTheme.colorScheme.surface)
     ) {
         DetailsHeader(
             text = state.title,
             rightButtonText = null,
             onIconPressed = null,
             onBackPressed = { onNavigateUp() }
         )
-        ChatListing(modifier = Modifier.weight(1f).padding(horizontal = 8.dp), subtitle = state.subtitle, items = state.items)
+        ChatListing(modifier = Modifier.weight(1f), subtitle = state.subtitle, items = state.items)
         if (state.showInput) {
             InputBar(
                 input = input,
@@ -73,6 +74,7 @@ private fun ConversationScreenContent(
     }
 }
 
+@AppThemePreviews
 @Preview
 @Composable
 fun ConversationScreenPreview() {

diff --git a/app/src/main/java/com/rokoblak/chatbackup/ui/theme/AppThemePreviews.kt b/app/src/main/java/com/rokoblak/chatbackup/ui/theme/AppThemePreviews.kt
@@ -0,0 +1,4 @@
+package com.rokoblak.chatbackup.ui.theme
+
+class AppThemePreviews {
+}
diff --git a/app/src/main/java/com/rokoblak/chatbackup/ui/theme/AppTypography.kt b/app/src/main/java/com/rokoblak/chatbackup/ui/theme/AppTypography.kt
diff --git a/app/src/main/java/com/rokoblak/chatbackup/ui/theme/Shape.kt b/app/src/main/java/com/rokoblak/chatbackup/ui/theme/Shape.kt
diff --git a/app/src/main/java/com/rokoblak/chatbackup/ui/theme/Theme.kt b/app/src/main/java/com/rokoblak/chatbackup/ui/theme/Theme.kt
@@ -1,43 +1,61 @@
 package com.rokoblak.chatbackup.ui.theme
 
+import android.app.Activity
 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.runtime.SideEffect
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat
 
-private val DarkColorPalette = darkColors(
+private val DarkColorScheme = darkColorScheme(
     primary = PrimaryDark,
-    primaryVariant = PrimaryVariantDark,
     secondary = SecondaryDark,
-    onPrimary = Color.White,
+    tertiary = SecondaryDark,
+    primaryContainer = Color(0xFF292929),
 )
 
-private val LightColorPalette = lightColors(
+private val LightColorScheme = lightColorScheme(
     primary = PrimaryLight,
-    primaryVariant = PrimaryVariantLight,
     secondary = SecondaryLight,
-    onPrimary = Color.Black,
-    background = Color(0xFFFAFDFF),
+    tertiary = SecondaryLight,
+    primaryContainer = Color(0xFFE6E6E6),
+
 )
 
 @Composable
 fun ChatBackupTheme(
     overrideDarkMode: Boolean? = null,
     darkTheme: Boolean = overrideDarkMode ?: isSystemInDarkTheme(),
+    // Dynamic color is available on Android 12+
+    dynamicColor: Boolean = true,
     content: @Composable () -> Unit
 ) {
-    val colors = if (darkTheme) {
-        DarkColorPalette
-    } else {
-        LightColorPalette
+    val colorScheme = when {
+//        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+//            val context = LocalContext.current
+//            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+//        }
+
+        darkTheme -> DarkColorScheme
+        else -> LightColorScheme
+    }
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            val window = (view.context as Activity).window
+            window.statusBarColor = colorScheme.primary.toArgb()
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+        }
     }
 
     MaterialTheme(
-        colors = colors,
-        typography = ChatBackupTypography,
-        shapes = Shapes,
+        colorScheme = colorScheme,
+        typography = Typography,
         content = content
     )
 }
diff --git a/app/src/main/java/com/rokoblak/chatbackup/ui/theme/Type.kt b/app/src/main/java/com/rokoblak/chatbackup/ui/theme/Type.kt
@@ -0,0 +1,34 @@
+package com.rokoblak.chatbackup.ui.theme
+
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Set of Material typography styles to start with
+val Typography = Typography(
+    bodyLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    )
+    /* Other default text styles to override
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
+    )
+    */
+)