Skip to content

Refactor UI to strict Material Design 3 #12

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.

Sign up for GitHub

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

Open
Max97k wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor UI to strict Material Design 3 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 8 additions & 5 deletions app/src/main/java/com/gpsspy/gpstracker/ui/screens/HistoryScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,20 +78,23 @@ fun SessionItem(session: SessionSummary, onExport: () -> Unit, onDelete: () -> U
val durationRemSec = durationSec % 60
val durationStr = String.format("%02d:%02d", durationMin, durationRemSec)

Card(modifier = Modifier.fillMaxWidth()) {
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(text = stringResource(R.string.history_session_num, session.sessionId), style = MaterialTheme.typography.titleMedium)
Text(text = stringResource(R.string.history_session_num, session.sessionId), style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
Spacer(modifier = Modifier.height(4.dp))
Text(text = stringResource(R.string.history_start, startTimeStr), style = MaterialTheme.typography.bodyMedium)
Text(text = stringResource(R.string.history_duration, durationStr), style = MaterialTheme.typography.bodyMedium)
Text(text = stringResource(R.string.history_start, startTimeStr), style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
Text(text = stringResource(R.string.history_duration, durationStr), style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)

Spacer(modifier = Modifier.height(8.dp))
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
TextButton(onClick = onExport) {
Text(stringResource(R.string.history_export))
}
Spacer(modifier = Modifier.width(8.dp))
Button(onClick = onDelete, colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error)) {
Button(onClick = onDelete, colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error, contentColor = MaterialTheme.colorScheme.onError)) {
Text(stringResource(R.string.history_delete))
}
}
Expand Down
1 change: 0 additions & 1 deletion app/src/main/java/com/gpsspy/gpstracker/ui/screens/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ fun MainScreen() {
}
}
) { innerPadding ->
Modifier.padding(innerPadding)
when (selectedTab) {
0 -> TrackingScreen(modifier = Modifier.padding(innerPadding))
1 -> HistoryScreen(modifier = Modifier.padding(innerPadding))
Expand Down
77 changes: 47 additions & 30 deletions app/src/main/java/com/gpsspy/gpstracker/ui/screens/PermissionScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,29 +72,34 @@ fun PermissionScreen(
Spacer(modifier = Modifier.height(32.dp))

// Educational Checklist
Column(modifier = Modifier.fillMaxWidth()) {
PermissionItem(
icon = Icons.Default.LocationOn,
title = stringResource(R.string.perm_loc_title),
description = stringResource(R.string.perm_loc_desc)
)
Spacer(modifier = Modifier.height(16.dp))
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
) {
Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
PermissionItem(
icon = Icons.Default.Info,
title = stringResource(R.string.perm_act_title),
description = stringResource(R.string.perm_act_desc)
icon = Icons.Default.LocationOn,
title = stringResource(R.string.perm_loc_title),
description = stringResource(R.string.perm_loc_desc)
)
Spacer(modifier = Modifier.height(16.dp))
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
PermissionItem(
icon = Icons.Default.Info,
title = stringResource(R.string.perm_act_title),
description = stringResource(R.string.perm_act_desc)
)
Spacer(modifier = Modifier.height(16.dp))
}
PermissionItem(
icon = Icons.Default.Notifications,
title = stringResource(R.string.perm_notif_title),
description = stringResource(R.string.perm_notif_desc)
)
}
PermissionItem(
icon = Icons.Default.Notifications,
title = stringResource(R.string.perm_notif_title),
description = stringResource(R.string.perm_notif_desc)
)
}

Spacer(modifier = Modifier.height(48.dp))
Spacer(modifier = Modifier.height(32.dp))
Button(onClick = {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
notificationPermissionLauncher.launch(Manifest.permission.POST_NOTIFICATIONS)
Expand All @@ -115,17 +120,29 @@ fun PermissionScreen(
}
} else {
// PROMINENT DISCLOSURE SCREEN (Crucial for Google Play Policy)
Text(
text = stringResource(R.string.perm_bg_title),
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = stringResource(R.string.perm_bg_description),
style = MaterialTheme.typography.bodyLarge,
textAlign = TextAlign.Center
)
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
) {
Column(
modifier = Modifier.fillMaxWidth().padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = stringResource(R.string.perm_bg_title),
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.height(16.dp))
Text(
text = stringResource(R.string.perm_bg_description),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurfaceVariant,
textAlign = TextAlign.Center
)
}
}
Spacer(modifier = Modifier.height(32.dp))
Button(onClick = {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
Expand Down Expand Up @@ -160,8 +177,8 @@ fun PermissionItem(icon: ImageVector, title: String, description: String) {
)
Spacer(modifier = Modifier.width(16.dp))
Column {
Text(text = title, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
Text(text = description, style = MaterialTheme.typography.bodyMedium)
Text(text = title, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.onSurfaceVariant)
Text(text = description, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
}
}
}
Expand Down
115 changes: 63 additions & 52 deletions app/src/main/java/com/gpsspy/gpstracker/ui/screens/RoutineAnalysisScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,66 +85,77 @@ fun RoutineAnalysisScreen(

Spacer(modifier = Modifier.height(32.dp))

// Pie Chart
val currentSummary = summary
if (currentSummary != null && currentSummary.stateDurations.isNotEmpty()) {
val totalDuration = currentSummary.stateDurations.values.sum()
if (totalDuration > 0) {
Box(modifier = Modifier.fillMaxWidth().height(250.dp), contentAlignment = Alignment.Center) {
Canvas(modifier = Modifier.fillMaxSize()) {
var startAngle = -90f
currentSummary.stateDurations.forEach { (state, duration) ->
val sweepAngle = (duration.toFloat() / totalDuration) * 360f
val color = when (state) {
RoutineState.HOME -> Color(0xFF42A5F5) // Blue
RoutineState.WORK -> Color(0xFF66BB6A) // Green
RoutineState.MOVING -> Color(0xFFEF5350) // Red
RoutineState.OUTDOOR_STAY -> Color(0xFFFFA726) // Orange
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
) {
Column(
modifier = Modifier.padding(16.dp).fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
// Pie Chart
val currentSummary = summary
if (currentSummary != null && currentSummary.stateDurations.isNotEmpty()) {
val totalDuration = currentSummary.stateDurations.values.sum()
if (totalDuration > 0) {
Box(modifier = Modifier.fillMaxWidth().height(250.dp), contentAlignment = Alignment.Center) {
Canvas(modifier = Modifier.fillMaxSize()) {
var startAngle = -90f
currentSummary.stateDurations.forEach { (state, duration) ->
val sweepAngle = (duration.toFloat() / totalDuration) * 360f
val color = when (state) {
RoutineState.HOME -> Color(0xFF42A5F5) // Blue
RoutineState.WORK -> Color(0xFF66BB6A) // Green
RoutineState.MOVING -> Color(0xFFEF5350) // Red
RoutineState.OUTDOOR_STAY -> Color(0xFFFFA726) // Orange
}
drawArc(
color = color,
startAngle = startAngle,
sweepAngle = sweepAngle,
useCenter = true
)
startAngle += sweepAngle
}
}
drawArc(
color = color,
startAngle = startAngle,
sweepAngle = sweepAngle,
useCenter = true
)
startAngle += sweepAngle
}
}
}

Spacer(modifier = Modifier.height(32.dp))
Spacer(modifier = Modifier.height(32.dp))

// Legend and Details
Column(modifier = Modifier.fillMaxWidth()) {
currentSummary.stateDurations.forEach { (state, durationMs) ->
val hours = TimeUnit.MILLISECONDS.toHours(durationMs)
val minutes = TimeUnit.MILLISECONDS.toMinutes(durationMs) % 60
val color = when (state) {
RoutineState.HOME -> Color(0xFF42A5F5)
RoutineState.WORK -> Color(0xFF66BB6A)
RoutineState.MOVING -> Color(0xFFEF5350)
RoutineState.OUTDOOR_STAY -> Color(0xFFFFA726)
// Legend and Details
Column(modifier = Modifier.fillMaxWidth()) {
currentSummary.stateDurations.forEach { (state, durationMs) ->
val hours = TimeUnit.MILLISECONDS.toHours(durationMs)
val minutes = TimeUnit.MILLISECONDS.toMinutes(durationMs) % 60
val color = when (state) {
RoutineState.HOME -> Color(0xFF42A5F5)
RoutineState.WORK -> Color(0xFF66BB6A)
RoutineState.MOVING -> Color(0xFFEF5350)
RoutineState.OUTDOOR_STAY -> Color(0xFFFFA726)
}
Row(verticalAlignment = Alignment.CenterVertically) {
// Color block
Surface(color = color, modifier = Modifier.size(16.dp), shape = MaterialTheme.shapes.small) {}

@gemini-code-assist gemini-code-assist Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using Surface just to draw a simple colored shape is inefficient because Surface is a relatively heavy composable that handles elevation, borders, and input interception. Instead, use a lightweight Box with background and clip modifiers.

Suggested change
Surface(color = color, modifier = Modifier.size(16.dp), shape = MaterialTheme.shapes.small) {}
Box(modifier = Modifier.size(16.dp).background(color, MaterialTheme.shapes.small))

Spacer(modifier = Modifier.width(8.dp))
Text(
text = "${state.name}: $hours h $minutes min",

@gemini-code-assist gemini-code-assist Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Avoid hardcoding user-facing strings and time unit labels like 'h' and 'min'. These should be defined as a plural or formatted string resource in strings.xml to support proper localization and internationalization (i18n).

Suggested change
text = "${state.name}: $hours h $minutes min",
text = stringResource(R.string.routine_state_duration, state.name, hours, minutes),

style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier.padding(vertical = 4.dp)
)
}
}
}
Row(verticalAlignment = Alignment.CenterVertically) {
// Color block
Surface(color = color, modifier = Modifier.size(16.dp)) {}
Spacer(modifier = Modifier.width(8.dp))
Text(
text = "${state.name}: $hours h $minutes min",
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.padding(vertical = 4.dp)
)
} else {
Box(modifier = Modifier.fillMaxWidth().height(250.dp), contentAlignment = Alignment.Center) {
Text("No tracking time accumulated", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)

@gemini-code-assist gemini-code-assist Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Avoid hardcoding user-facing text. Use stringResource to load the string from strings.xml to ensure the application can be localized.

Suggested change
Text("No tracking time accumulated", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
Text(stringResource(R.string.routine_no_tracking_time), style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)

}
}
} else {
Box(modifier = Modifier.fillMaxWidth().height(250.dp), contentAlignment = Alignment.Center) {
Text("No data for this day", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)

@gemini-code-assist gemini-code-assist Bot Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Avoid hardcoding user-facing text. Use stringResource to load the string from strings.xml to ensure the application can be localized.

Suggested change
Text("No data for this day", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)
Text(stringResource(R.string.routine_no_data), style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurfaceVariant)

}
}
} else {
Box(modifier = Modifier.fillMaxWidth().height(250.dp), contentAlignment = Alignment.Center) {
Text("No tracking time accumulated", style = MaterialTheme.typography.titleMedium)
}
}
} else {
Box(modifier = Modifier.fillMaxWidth().height(250.dp), contentAlignment = Alignment.Center) {
Text("No data for this day", style = MaterialTheme.typography.titleMedium)
}
}

Expand Down
Loading