lostecho/Tomato
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create initial UI based on Material 3 Expressive

Browse Source
This commit is contained in:
Nishant Mishra
2025-06-29 12:22:32 +05:30
parent 8873fa3d3e
commit 68c87bc936
7 changed files with 141 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/build.gradle.kts
View File

@@ -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

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

@@ -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)
}
}
}
}

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

@@ -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)
)
*/
)
}

10
app/src/main/res/drawable/pause_large.xml Normal file
View File

@@ -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>

10
app/src/main/res/drawable/restart_large.xml Normal file
View File

@@ -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>

BIN
app/src/main/res/font/open_runde_bold_clock_only.otf Normal file
View File

Binary file not shown.

6
gradle/libs.versions.toml
View File

@@ -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" }