Create initial UI based on Material 3 Expressive

app/build.gradle.kts

@@ -1,3 +1,5 @@
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
@@ -28,11 +30,13 @@ android {
         }
     }
     compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_11
+        sourceCompatibility = JavaVersion.VERSION_17
-        targetCompatibility = JavaVersion.VERSION_11
+        targetCompatibility = JavaVersion.VERSION_17
     }
-    kotlinOptions {
+    kotlin {
-        jvmTarget = "11"
+        compilerOptions {
+            jvmTarget.set(JvmTarget.JVM_17) // Use the enum for target JVM version
+        }
     }
     buildFeatures {
         compose = true

app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt

@@ -1,15 +1,116 @@
 package org.nsh07.pomodoro.ui
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.TextAutoSize
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledIconButton
+import androidx.compose.material3.FilledTonalIconButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.material3.MaterialTheme.typography
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.nsh07.pomodoro.R
+import org.nsh07.pomodoro.ui.theme.OpenRundeFontFamily.openRundeClock
 
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun AppScreen(modifier: Modifier = Modifier) {
     Scaffold(
         modifier = modifier.fillMaxSize()
-    ) {
+    ) { insets ->
+        Column(
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(insets)
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                Box(contentAlignment = Alignment.Center) {
+                    CircularProgressIndicator(
+                        progress = { 0.3f },
+                        modifier = Modifier.size(350.dp),
+                        strokeWidth = 32.dp,
+                        gapSize = 32.dp
+                    )
+                    Box(Modifier.width(220.dp)) {
+                        Text(
+                            text = "08:34",
+                            style = TextStyle(
+                                fontFamily = openRundeClock,
+                                fontWeight = FontWeight.Bold,
+                                fontSize = 76.sp,
+                                letterSpacing = (-2).sp
+                            ),
+                            maxLines = 1,
+                            autoSize = TextAutoSize.StepBased()
+                        )
+                    }
+                }
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    modifier = Modifier.padding(16.dp)
+                ) {
+                    FilledTonalIconButton(
+                        onClick = { /*TODO*/ },
+                        shapes = IconButtonDefaults.shapes(),
+                        modifier = Modifier.size(96.dp)
+                    ) {
+                        Icon(
+                            painterResource(R.drawable.restart_large),
+                            contentDescription = "Restart"
+                        )
+                    }
+                    FilledIconButton(
+                        onClick = { /*TODO*/ },
+                        shapes = IconButtonDefaults.shapes(),
+                        modifier = Modifier.size(width = 128.dp, height = 96.dp)
+                    ) {
+                        Icon(
+                            painterResource(R.drawable.pause_large),
+                            contentDescription = "Pause"
+                        )
+                    }
+                }
+            }
 
+            Spacer(Modifier.height(32.dp))
+
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                Text("Up next", style = typography.titleSmall)
+                Text(
+                    "5:00",
+                    style = TextStyle(
+                        fontFamily = openRundeClock,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 22.sp,
+                        lineHeight = 28.sp,
+                        color = colorScheme.tertiary
+                    )
+                )
+                Text("Short break", style = typography.titleMediumEmphasized)
+            }
+        }
     }
 }

app/src/main/java/org/nsh07/pomodoro/ui/theme/Type.kt

@@ -2,9 +2,11 @@ package org.nsh07.pomodoro.ui.theme
 
 import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
+import org.nsh07.pomodoro.R
 
 // Set of Material typography styles to start with
 val Typography = Typography(
@@ -15,20 +17,10 @@ val Typography = Typography(
         lineHeight = 24.sp,
         letterSpacing = 0.5.sp
     )
-    /* Other default text styles to override
+)
-    titleLarge = TextStyle(
+
-        fontFamily = FontFamily.Default,
+object OpenRundeFontFamily {
-        fontWeight = FontWeight.Normal,
+    val openRundeClock = FontFamily(
-        fontSize = 22.sp,
+        Font(R.font.open_runde_bold_clock_only, FontWeight.Bold)
-        lineHeight = 28.sp,
-        letterSpacing = 0.sp
-    ),
-    labelSmall = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.5.sp
     )
-    */
+}
-)

app/src/main/res/drawable/pause_large.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M633.67,779q-35.5,0 -59.75,-24.25T549.67,695v-432q0,-34.83 24.25,-59.42Q598.17,179 633.67,179h36.66q34.84,0 59.42,24.58 24.58,24.59 24.58,59.42v432q0,35.5 -24.58,59.75T670.33,779h-36.66ZM290.33,779q-35.5,0 -59.75,-24.25T206.33,695v-432q0,-34.83 24.25,-59.42Q254.83,179 290.33,179L327,179q34.83,0 59.42,24.58Q411,228.17 411,263v432q0,35.5 -24.58,59.75Q361.83,779 327,779h-36.67Z" />
+</vector>

app/src/main/res/drawable/restart_large.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M390.67,848q-109.34,-29 -180,-119.83Q140,637.33 140,520.67q0,-59.34 21,-113.34T220.67,311q9.33,-16 28,-17.33 18.66,-1.34 33.66,13 9.67,10.33 10.84,25 1.16,14.66 -7.84,27 -29.33,33 -45.33,74.83t-16,87.17q0,87 50.67,153.66 50.66,66.67 131.66,91 13.34,5 23,16.84Q439,794 439,808.33q0,22 -15,33.67 -15,11.67 -33.33,6ZM571.33,848q-19,5.67 -33.66,-6Q523,830.33 523,809q0,-13.33 9.33,-26 9.34,-12.67 23.34,-17.67 81,-23.33 131.5,-90.33t50.5,-154.33q0,-106 -71.67,-181.5t-177.33,-75.5h-12l20.66,20.66q11.67,12.34 9.17,28.84T493.67,340Q481,352.67 463.5,352.67T434,340l-89.67,-89q-6,-6 -9.16,-13.5Q332,230 332,222t3.17,-15.5q3.16,-7.5 9.16,-14.17l90,-90Q446,90.67 463,90.5q17,-0.17 30.67,12.83 13,13.67 13.66,29.34 0.67,15.66 -10,26.33l-20.66,20.67h12Q628.33,179.67 725,280q96.67,100.33 96.67,240.67 0,117.66 -70.34,208Q681,819 571.33,848Z" />
+</vector>

gradle/libs.versions.toml

@@ -1,13 +1,13 @@
 [versions]
 agp = "8.11.0"
-kotlin = "2.0.21"
+kotlin = "2.2.0"
 coreKtx = "1.16.0"
 junit = "4.13.2"
 junitVersion = "1.2.1"
 espressoCore = "3.6.1"
 lifecycleRuntimeKtx = "2.9.1"
 activityCompose = "1.10.1"
-composeBom = "2024.09.00"
+composeBom = "2025.06.01"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -16,7 +16,7 @@ androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "j
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
 androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
 androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
-androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
+androidx-compose-bom = { group = "androidx.compose", name = "compose-bom-alpha", version.ref = "composeBom" }
 androidx-ui = { group = "androidx.compose.ui", name = "ui" }
 androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
 androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }