Skip to content

Update Jetcaster Wear module to Material3 #1568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions Jetcaster/gradle/libs.versions.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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" }
Expand All @@ -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" }
Expand All @@ -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" }
Expand Down
19 changes: 13 additions & 6 deletions Jetcaster/wear/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ android {

dependencies {


def composeBom = platform(libs.androidx.compose.bom)

// General compose dependencies
Expand All @@ -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

Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -29,7 +28,6 @@ class MainActivity : ComponentActivity() {
lateinit var navController: NavHostController

override fun onCreate(savedInstanceState: Bundle?) {
installSplashScreen()
super.onCreate(savedInstanceState)

setContent {
Expand Down
18 changes: 9 additions & 9 deletions Jetcaster/wear/src/main/java/com/example/jetcaster/WearApp.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand All @@ -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,
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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,
)
Original file line number Diff line number Diff line change
@@ -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),
)
36 changes: 14 additions & 22 deletions Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Type.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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,
)
Original file line number Diff line number Diff line change
Expand Up @@ -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,
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading