Migrate from Material 2 to Material 3 in Compose

app/build.gradle

@@ -113,7 +113,8 @@ dependencies {
     implementation libs.androidx.activity.compose
     implementation libs.androidx.hilt.navigation.compose
     implementation libs.compose.foundation
-    implementation libs.compose.material
+    implementation libs.compose.material3
+    implementation libs.compose.material3.windowsizeclass
     implementation libs.compose.ui
 
     implementation libs.androidx.profileinstaller

app/dependencies/releaseRuntimeClasspath.txt

@@ -23,6 +23,10 @@ androidx.compose.foundation:foundation-android:1.7.6
 androidx.compose.foundation:foundation-layout-android:1.7.6
 androidx.compose.foundation:foundation-layout:1.7.6
 androidx.compose.foundation:foundation:1.7.6
+androidx.compose.material3:material3-android:1.3.1
+androidx.compose.material3:material3-window-size-class-android:1.3.1
+androidx.compose.material3:material3-window-size-class:1.3.1
+androidx.compose.material3:material3:1.3.1
 androidx.compose.material:material-android:1.7.6
 androidx.compose.material:material-icons-core-android:1.7.6
 androidx.compose.material:material-icons-core:1.7.6

app/src/main/java/soup/movie/ui/main/MainActivity.kt

@@ -19,17 +19,19 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.core.view.WindowCompat
 import dagger.hilt.android.AndroidEntryPoint
 import soup.movie.R
 import soup.movie.core.designsystem.theme.MovieTheme
-import soup.movie.core.designsystem.windowsizeclass.calculateWindowSizeClass
 
 @AndroidEntryPoint
 class MainActivity : AppCompatActivity() {
 
     private val viewModel: MainViewModel by viewModels()
 
+    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         setTheme(R.style.Theme_Moop)
         super.onCreate(savedInstanceState)

app/src/main/java/soup/movie/ui/main/MainNavGraph.kt

@@ -15,13 +15,13 @@
  */
 package soup.movie.ui.main
 
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
 import kotlinx.serialization.Serializable
-import soup.movie.core.designsystem.windowsizeclass.WindowWidthSizeClass
 import soup.movie.feature.detail.rememberDetailComposableFactory
 import soup.movie.feature.home.rememberHomeComposableFactory
 import soup.movie.feature.search.rememberSearchComposableFactory

core/designsystem/build.gradle

@@ -13,8 +13,8 @@ dependencies {
     implementation libs.kotlin.stdlib
 
     implementation libs.compose.foundation
-    implementation libs.compose.material
     implementation libs.compose.materialIconsExtended
+    implementation libs.compose.material3
     implementation libs.compose.ui
 
     implementation libs.androidx.window

core/designsystem/src/main/java/soup/movie/core/designsystem/theme/Colors.kt

@@ -15,18 +15,16 @@
  */
 package soup.movie.core.designsystem.theme
 
-import androidx.compose.material.Colors
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
-import androidx.compose.material.primarySurface
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 
 @Stable
 data class MovieColors(
-    internal val material: Colors,
-    val divider: Color,
+    internal val material: ColorScheme,
     val star: Color,
     val dim: Color,
     val cgv: Color,
@@ -43,25 +41,17 @@ data class MovieColors(
     val ageTagUnknown: Color,
 ) {
     val primary: Color get() = material.primary
-    val primaryVariant: Color get() = material.primaryVariant
     val secondary: Color get() = material.secondary
-    val secondaryVariant: Color get() = material.secondaryVariant
     val background: Color get() = material.background
     val surface: Color get() = material.surface
     val error: Color get() = material.error
-    val onPrimary: Color get() = material.onPrimary
-    val onSecondary: Color get() = material.onSecondary
     val onBackground: Color get() = material.onBackground
     val onSurface: Color get() = material.onSurface
     val onError: Color get() = material.onError
-    val isLight: Boolean get() = material.isLight
-
-    val primarySurface: Color get() = material.primarySurface
 }
 
 fun lightMovieColors(
-    material: Colors = lightColors(),
-    divider: Color = Color(0xFFF5F5F5),
+    material: ColorScheme = lightColorScheme(),
     star: Color = Color(0xFFFFC107),
     dim: Color = Color(0xDDFFFFFF),
     cgv: Color = Color.White,
@@ -78,7 +68,6 @@ fun lightMovieColors(
     ageTagUnknown: Color = Color(0xFF9E9E9E),
 ): MovieColors = MovieColors(
     material = material,
-    divider = divider,
     star = star,
     dim = dim,
     cgv = cgv,
@@ -96,8 +85,7 @@ fun lightMovieColors(
 )
 
 fun darkMovieColors(
-    material: Colors = darkColors(),
-    divider: Color = Color(0xFF212121),
+    material: ColorScheme = darkColorScheme(),
     star: Color = Color(0xFFFFC107),
     dim: Color = Color(0xAA000000),
     cgv: Color = Color.White,
@@ -114,7 +102,6 @@ fun darkMovieColors(
     ageTagUnknown: Color = Color(0xFFE0E0E0),
 ): MovieColors = MovieColors(
     material = material,
-    divider = divider,
     star = star,
     dim = dim,
     cgv = cgv,

core/designsystem/src/main/java/soup/movie/core/designsystem/theme/Themes.kt

@@ -16,44 +16,20 @@
 package soup.movie.core.designsystem.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Shapes
-import androidx.compose.material.Typography
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Shapes
+import androidx.compose.material3.Typography
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
 
 private val LightMovieColors = lightMovieColors(
-    material = lightColors(
-        primary = Color.White,
-        primaryVariant = Color(0xFF9E9E9E),
-        onPrimary = Color.Black,
-        secondary = Color(0xFF2D7AF6),
-        onSecondary = Color.White,
-    ),
+    material = lightColorScheme(),
 )
 
 private val DarkMovieColors = darkMovieColors(
-    material = darkColors(
-        primary = Color.Black,
-        primaryVariant = Color.Black,
-        onPrimary = Color.White,
-        secondary = Color(0xFF8EB5F0),
-        onSecondary = Color.Black,
-    ),
-)
-
-private val LightElevations = Elevations(
-    card = 10.dp,
-    bottomSheet = 16.dp,
-)
-
-private val DarkElevations = Elevations(
-    card = 1.dp,
-    bottomSheet = 0.dp,
+    material = darkColorScheme(),
 )
 
 @Composable
@@ -66,17 +42,9 @@ fun MovieTheme(
     } else {
         LightMovieColors
     }
-    val elevation = if (darkTheme) {
-        DarkElevations
-    } else {
-        LightElevations
-    }
-    CompositionLocalProvider(
-        LocalMovieColors provides colors,
-        LocalElevations provides elevation,
-    ) {
+    CompositionLocalProvider(LocalMovieColors provides colors) {
         MaterialTheme(
-            colors = colors.material,
+            colorScheme = colors.material,
             content = content,
         )
     }
@@ -95,8 +63,4 @@ object MovieTheme {
     val shapes: Shapes
         @Composable
         get() = MaterialTheme.shapes
-
-    val elevations: Elevations
-        @Composable
-        get() = LocalElevations.current
 }