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

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