From 68c87bc936d1685d7d6515579aa2e0cfe74f6638 Mon Sep 17 00:00:00 2001 From: Nishant Mishra Date: Sun, 29 Jun 2025 12:22:32 +0530 Subject: [PATCH] Create initial UI based on Material 3 Expressive --- app/build.gradle.kts | 12 +- .../java/org/nsh07/pomodoro/ui/AppScreen.kt | 103 +++++++++++++++++- .../java/org/nsh07/pomodoro/ui/theme/Type.kt | 24 ++-- app/src/main/res/drawable/pause_large.xml | 10 ++ app/src/main/res/drawable/restart_large.xml | 10 ++ .../res/font/open_runde_bold_clock_only.otf | Bin 0 -> 18732 bytes gradle/libs.versions.toml | 6 +- 7 files changed, 141 insertions(+), 24 deletions(-) create mode 100644 app/src/main/res/drawable/pause_large.xml create mode 100644 app/src/main/res/drawable/restart_large.xml create mode 100644 app/src/main/res/font/open_runde_bold_clock_only.otf diff --git a/app/build.gradle.kts b/app/build.gradle.kts index b2d25ce..4cb9390 100644 --- a/app/build.gradle.kts +++ b/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 - targetCompatibility = JavaVersion.VERSION_11 + sourceCompatibility = JavaVersion.VERSION_17 + targetCompatibility = JavaVersion.VERSION_17 } - kotlinOptions { - jvmTarget = "11" + kotlin { + compilerOptions { + jvmTarget.set(JvmTarget.JVM_17) // Use the enum for target JVM version + } } buildFeatures { compose = true diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt b/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt index 5434adf..e5383fa 100644 --- a/app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt +++ b/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) + } + } } } \ No newline at end of file diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/theme/Type.kt b/app/src/main/java/org/nsh07/pomodoro/ui/theme/Type.kt index eaa2362..7963446 100644 --- a/app/src/main/java/org/nsh07/pomodoro/ui/theme/Type.kt +++ b/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, - 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 +) + +object OpenRundeFontFamily { + val openRundeClock = FontFamily( + Font(R.font.open_runde_bold_clock_only, FontWeight.Bold) ) - */ -) \ No newline at end of file +} \ No newline at end of file diff --git a/app/src/main/res/drawable/pause_large.xml b/app/src/main/res/drawable/pause_large.xml new file mode 100644 index 0000000..4158d6f --- /dev/null +++ b/app/src/main/res/drawable/pause_large.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/main/res/drawable/restart_large.xml b/app/src/main/res/drawable/restart_large.xml new file mode 100644 index 0000000..52415d3 --- /dev/null +++ b/app/src/main/res/drawable/restart_large.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/main/res/font/open_runde_bold_clock_only.otf b/app/src/main/res/font/open_runde_bold_clock_only.otf new file mode 100644 index 0000000000000000000000000000000000000000..9c1b2b4e65cbf0c437f49061877523ab38f5266d GIT binary patch literal 18732 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