Update Jetcaster Wear module to Material3 (#1568)

Update Jetcaster Wear module to Material3

Author: kul3r4

Jetcaster/gradle/libs.versions.toml

@@ -24,7 +24,8 @@ androidx-test-ext-junit = "1.2.1"
 androidx-test-ext-truth = "1.6.0"
 androidx-tv-foundation = "1.0.0-alpha12"
 androidx-tv-material = "1.0.0"
-androidx-wear-compose = "1.4.1"
+androidx-wear-compose-material3 = "1.5.0-beta01"
+androidx-wear-compose = "1.5.0-beta01"
 androidx-window = "1.3.0"
 androidxHiltNavigationCompose = "1.2.0"
 androix-test-uiautomator = "2.3.0"
@@ -36,7 +37,7 @@ google-maps = "19.2.0"
 gradle-versions = "0.52.0"
 hilt = "2.56.2"
 hiltExt = "1.2.0"
-horologist = "0.6.23"
+horologist = "0.7.14-beta"
 jdkDesugar = "2.1.5"
 junit = "4.13.2"
 kotlin = "2.1.20"
@@ -122,7 +123,7 @@ androidx-test-uiautomator = { module = "androidx.test.uiautomator:uiautomator",
 androidx-tv-foundation = { module = "androidx.tv:tv-foundation", version.ref = "androidx-tv-foundation" }
 androidx-tv-material = { module = "androidx.tv:tv-material", version.ref = "androidx-tv-material" }
 androidx-wear-compose-foundation = { module = "androidx.wear.compose:compose-foundation", version.ref = "androidx-wear-compose" }
-androidx-wear-compose-material = { module = "androidx.wear.compose:compose-material", version.ref = "androidx-wear-compose" }
+androidx-wear-compose-material = { module = "androidx.wear.compose:compose-material3", version.ref = "androidx-wear-compose-material3" }
 androidx-wear-compose-navigation = { module = "androidx.wear.compose:compose-navigation", version.ref = "androidx-wear-compose" }
 androidx-wear-compose-ui-tooling = { module = "androidx.wear.compose:compose-ui-tooling", version.ref = "androidx-wear-compose" }
 androidx-window = { module = "androidx.window:window", version.ref = "androidx-window" }
@@ -137,13 +138,17 @@ hilt-android-testing = { module = "com.google.dagger:hilt-android-testing", vers
 hilt-compiler = { module = "com.google.dagger:hilt-compiler", version.ref = "hilt" }
 hilt-ext-compiler = { module = "androidx.hilt:hilt-compiler", version.ref = "hiltExt" }
 horologist-audio-ui = { module = "com.google.android.horologist:horologist-audio-ui", version.ref = "horologist" }
+horologist-audio-uimaterial3 = { module = "com.google.android.horologist:horologist-audio-ui-material3", version.ref = "horologist" }
+horologist-audio-ui-model = { module = "com.google.android.horologist:horologist-audio-ui-model", version.ref = "horologist" }
 horologist-composables = { module = "com.google.android.horologist:horologist-composables", version.ref = "horologist" }
 horologist-compose-layout = { module = "com.google.android.horologist:horologist-compose-layout", version.ref = "horologist" }
 horologist-compose-material = { module = "com.google.android.horologist:horologist-compose-material", version.ref = "horologist" }
 horologist-compose-tools = { module = "com.google.android.horologist:horologist-compose-tools", version.ref = "horologist" }
 horologist-images-coil = { module = "com.google.android.horologist:horologist-images-coil", version.ref = "horologist" }
 horologist-media-data = { module = "com.google.android.horologist:horologist-media-data", version.ref = "horologist" }
 horologist-media-ui = { module = "com.google.android.horologist:horologist-media-ui", version.ref = "horologist" }
+horologist-media-uimaterial3 = { module = "com.google.android.horologist:horologist-media-ui-material3", version.ref = "horologist" }
+horologist-media-ui-model = { module = "com.google.android.horologist:horologist-media-ui-model", version.ref = "horologist" }
 horologist-roboscreenshots = { module = "com.google.android.horologist:horologist-roboscreenshots", version.ref = "horologist" }
 junit = { module = "junit:junit", version.ref = "junit" }
 kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib-jdk8", version.ref = "kotlin" }
@@ -162,6 +167,7 @@ rometools-modules = { module = "com.rometools:rome-modules", version.ref = "rome
 rometools-rome = { module = "com.rometools:rome", version.ref = "rome" }
 androidx-media3-session = {module = "androidx.media3:media3-session",version.ref = "media3"}
 androidx-media3-exoplayer = {module = "androidx.media3:media3-exoplayer", version.ref = "media3"}
+androidx-media3-common-ktx = { group = "androidx.media3", name = "media3-common-ktx", version.ref = "media3" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }

Jetcaster/wear/build.gradle

@@ -74,7 +74,6 @@ android {
 
 dependencies {
 
-
     def composeBom = platform(libs.androidx.compose.bom)
 
     // General compose dependencies
@@ -90,21 +89,31 @@ dependencies {
     // https://issuetracker.google.com/issues/new?component=1077552&template=1598429&pli=1
     implementation libs.androidx.wear.compose.material
 
+    // For using the phone Typography
+    implementation libs.androidx.compose.material3
+
     implementation(libs.kotlinx.collections.immutable)
 
     // Foundation is additive, so you can use the mobile version in your Wear OS app.
     implementation libs.androidx.wear.compose.foundation
     implementation(libs.androidx.material.icons.core)
     implementation(libs.androidx.compose.material.iconsExtended)
 
+    implementation(libs.androidx.media3.exoplayer)
+    implementation(libs.androidx.media3.ui.compose)
+    implementation(libs.androidx.media3.session)
+    implementation libs.androidx.media3.common.ktx
+
     // Horologist for correct Compose layout
-    implementation libs.horologist.composables
     implementation libs.horologist.compose.layout
-    implementation libs.horologist.compose.material
 
     //Horologist Media toolkit
     implementation libs.horologist.media.ui
+    implementation libs.horologist.media.uimaterial3
+    implementation libs.horologist.media.ui.model
     implementation libs.horologist.audio.ui
+    implementation libs.horologist.audio.uimaterial3
+    implementation libs.horologist.audio.ui.model
     implementation libs.horologist.media.data
     implementation libs.horologist.images.coil
 
@@ -140,9 +149,7 @@ dependencies {
     testImplementation libs.roborazzi
     testImplementation libs.roborazzi.compose
     testImplementation libs.roborazzi.rule
-    testImplementation(libs.horologist.roboscreenshots) {
-      exclude(group: "com.github.QuickBirdEng.kotlin-snapshot-testing")
-    }
+    testImplementation(libs.horologist.roboscreenshots)
 
     androidTestImplementation libs.androidx.test.ext.junit
     androidTestImplementation libs.androidx.test.espresso.core

Jetcaster/wear/src/main/java/com/example/jetcaster/MainActivity.kt

@@ -19,7 +19,6 @@ package com.example.jetcaster
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.navigation.NavHostController
 import androidx.wear.compose.navigation.rememberSwipeDismissableNavController
 import dagger.hilt.android.AndroidEntryPoint
@@ -29,7 +28,6 @@ class MainActivity : ComponentActivity() {
     lateinit var navController: NavHostController
 
     override fun onCreate(savedInstanceState: Bundle?) {
-        installSplashScreen()
         super.onCreate(savedInstanceState)
 
         setContent {

Jetcaster/wear/src/main/java/com/example/jetcaster/WearApp.kt

@@ -18,14 +18,16 @@ package com.example.jetcaster
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
+import androidx.wear.compose.foundation.pager.rememberPagerState
+import androidx.wear.compose.material3.AppScaffold
+import androidx.wear.compose.material3.ScreenScaffold
 import androidx.wear.compose.navigation.SwipeDismissableNavHost
 import androidx.wear.compose.navigation.composable
 import androidx.wear.compose.navigation.rememberSwipeDismissableNavHostState
@@ -47,14 +49,12 @@ import com.example.jetcaster.ui.player.PlayerScreen
 import com.example.jetcaster.ui.podcast.PodcastDetailsScreen
 import com.example.jetcaster.ui.podcasts.PodcastsScreen
 import com.example.jetcaster.ui.queue.QueueScreen
-import com.google.android.horologist.audio.ui.VolumeScreen
 import com.google.android.horologist.audio.ui.VolumeViewModel
-import com.google.android.horologist.compose.layout.AppScaffold
-import com.google.android.horologist.compose.layout.ScreenScaffold
-import com.google.android.horologist.media.ui.navigation.MediaNavController.navigateToPlayer
-import com.google.android.horologist.media.ui.navigation.MediaNavController.navigateToVolume
-import com.google.android.horologist.media.ui.navigation.NavigationScreens
-import com.google.android.horologist.media.ui.screens.playerlibrarypager.PlayerLibraryPagerScreen
+import com.google.android.horologist.audio.ui.material3.VolumeScreen
+import com.google.android.horologist.media.ui.material3.navigation.MediaNavController.navigateToPlayer
+import com.google.android.horologist.media.ui.material3.navigation.MediaNavController.navigateToVolume
+import com.google.android.horologist.media.ui.material3.navigation.NavigationScreens
+import com.google.android.horologist.media.ui.material3.screens.playerlibrarypager.PlayerLibraryPagerScreen
 
 @Composable
 fun WearApp(navController: NavHostController) {
@@ -64,7 +64,7 @@ fun WearApp(navController: NavHostController) {
     WearAppTheme {
         AppScaffold {
             SwipeDismissableNavHost(
-                startDestination = NavigationScreens.Player.playerDestination(),
+                startDestination = NavigationScreens.Player.navRoute,
                 navController = navController,
                 modifier = Modifier.background(Color.Transparent),
                 state = navHostState,

Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Color.kt

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.jetcaster.theme
+
+import androidx.compose.ui.graphics.Color
+import androidx.wear.compose.material3.ColorScheme
+import com.example.jetcaster.designsystem.theme.backgroundDark
+import com.example.jetcaster.designsystem.theme.errorContainerDark
+import com.example.jetcaster.designsystem.theme.errorDark
+import com.example.jetcaster.designsystem.theme.onBackgroundDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.onErrorContainerDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.onErrorDark
+import com.example.jetcaster.designsystem.theme.onPrimaryContainerDark
+import com.example.jetcaster.designsystem.theme.onSecondaryContainerDark
+import com.example.jetcaster.designsystem.theme.onSecondaryDark
+import com.example.jetcaster.designsystem.theme.onSurfaceVariantDark
+import com.example.jetcaster.designsystem.theme.onSurfaceVariantDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.onTertiaryDark
+import com.example.jetcaster.designsystem.theme.outlineDark
+import com.example.jetcaster.designsystem.theme.outlineVariantDark
+import com.example.jetcaster.designsystem.theme.primaryContainerDark
+import com.example.jetcaster.designsystem.theme.primaryDark
+import com.example.jetcaster.designsystem.theme.secondaryContainerDark
+import com.example.jetcaster.designsystem.theme.secondaryDark
+import com.example.jetcaster.designsystem.theme.surfaceContainerDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.surfaceContainerHighDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.surfaceContainerLowDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.tertiaryContainerDarkMediumContrast
+import com.example.jetcaster.designsystem.theme.tertiaryDark
+
+internal val wearColorPalette: ColorScheme = ColorScheme(
+    primary = primaryDark,
+    primaryDim = primaryDark,
+    onPrimary = Color(0xFF542104),
+    primaryContainer = primaryContainerDark,
+    onPrimaryContainer = onPrimaryContainerDark,
+    secondary = secondaryDark,
+    secondaryDim = secondaryDark,
+    onSecondary = onSecondaryDark,
+    secondaryContainer = secondaryContainerDark,
+    onSecondaryContainer = onSecondaryContainerDark,
+    tertiary = tertiaryDark,
+    onTertiary = onTertiaryDark,
+    tertiaryContainer = tertiaryContainerDarkMediumContrast,
+    error = errorDark,
+    onError = onErrorDark,
+    errorContainer = errorContainerDark,
+    onErrorContainer = onErrorContainerDarkMediumContrast,
+    background = backgroundDark,
+    onBackground = onBackgroundDarkMediumContrast,
+    onSurface = onSurfaceVariantDarkMediumContrast,
+    onSurfaceVariant = onSurfaceVariantDark,
+    surfaceContainer = surfaceContainerDarkMediumContrast,
+    surfaceContainerLow = surfaceContainerLowDarkMediumContrast,
+    surfaceContainerHigh = surfaceContainerHighDarkMediumContrast,
+    outline = outlineDark,
+    outlineVariant = outlineVariantDark,
+)

Jetcaster/wear/src/main/java/com/example/jetcaster/theme/ColorScheme.kt

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.jetcaster.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.unit.dp
+import androidx.wear.compose.material3.Shapes
+
+val Shapes = Shapes(
+    medium = RoundedCornerShape(16.dp),
+)

Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Shape.kt

@@ -16,29 +16,21 @@
 
 package com.example.jetcaster.theme
 
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
-import androidx.wear.compose.material.Typography
-import com.example.jetcaster.designsystem.theme.Montserrat
+import androidx.wear.compose.material3.Typography
+import com.example.jetcaster.designsystem.theme.JetcasterTypography
 
 // Set of Material typography styles to start with
 val Typography = Typography(
-    body1 = TextStyle(
-        fontFamily = Montserrat,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-    ),
-    /* Other default text styles to override
-    button = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
-    ),
-    caption = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
-    )
-     */
+    displayLarge = JetcasterTypography.displayLarge,
+    displayMedium = JetcasterTypography.displayMedium,
+    displaySmall = JetcasterTypography.displaySmall,
+    titleLarge = JetcasterTypography.titleLarge,
+    titleMedium = JetcasterTypography.titleMedium,
+    titleSmall = JetcasterTypography.titleSmall,
+    labelLarge = JetcasterTypography.labelLarge,
+    labelMedium = JetcasterTypography.labelMedium,
+    labelSmall = JetcasterTypography.labelSmall,
+    bodyLarge = JetcasterTypography.bodyLarge,
+    bodyMedium = JetcasterTypography.bodyMedium,
+    bodySmall = JetcasterTypography.bodySmall,
 )

Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Type.kt

@@ -17,15 +17,14 @@
 package com.example.jetcaster.theme
 
 import androidx.compose.runtime.Composable
-import androidx.wear.compose.material.MaterialTheme
+import androidx.wear.compose.material3.MaterialTheme
 
 @Composable
 fun WearAppTheme(content: @Composable () -> Unit) {
     MaterialTheme(
-        colors = wearColorPalette,
+        colorScheme = wearColorPalette,
         typography = Typography,
-        // For shapes, we generally recommend using the default Material Wear shapes which are
-        // optimized for round and non-round devices.
+        shapes = Shapes,
         content = content,
     )
 }

Jetcaster/wear/src/main/java/com/example/jetcaster/theme/WearAppTheme.kt

@@ -21,7 +21,7 @@ import androidx.navigation.NamedNavArgument
 import androidx.navigation.NavController
 import androidx.navigation.NavType
 import androidx.navigation.navArgument
-import com.google.android.horologist.media.ui.navigation.NavigationScreens
+import com.google.android.horologist.media.ui.material3.navigation.NavigationScreens
 
 /**
  * NavController extensions that links to the screens of the Jetcaster app.