Merge pull request #294 from breanatate/exercise-screen

Update exercise screen UI, use pagination for exercise control buttons
android · Oct 6, 2024 · 441b35e · 441b35e
2 parents 6a2c672 + d0482e5
commit 441b35e
Show file tree

Hide file tree

Showing 39 changed files with 233 additions and 113 deletions.
diff --git a/...pp/src/main/java/com/example/exercisesamplecompose/presentation/component/CaloriesText.kt b/...pp/src/main/java/com/example/exercisesamplecompose/presentation/component/CaloriesText.kt
@@ -16,16 +16,42 @@
 
 package com.example.exercisesamplecompose.presentation.component
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Text
 
 @Composable
 fun CaloriesText(calories: Double?) {
-    if (calories != null)
-        Text(text = formatCalories(calories))
-    else
-        Text(text = "--")
+    Column {
+        Row(horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth() ){
+            if (calories != null)
+                Text(
+                    text = formatCalories(calories), fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colors.primary,
+                    fontSize = 20.sp
+                )
+            else
+                Text(text = "--")
+            Text(
+                text = "cal", fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colors.primary,
+                fontSize = 10.sp,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
 }
 
 @Preview

diff --git a/...pp/src/main/java/com/example/exercisesamplecompose/presentation/component/DistanceText.kt b/...pp/src/main/java/com/example/exercisesamplecompose/presentation/component/DistanceText.kt
@@ -16,13 +16,42 @@
 
 package com.example.exercisesamplecompose.presentation.component
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Text
 
 @Composable
 fun DistanceText(distance: Double?) {
-    Text(text = formatDistanceKm(distance))
+    Column {
+        Row(
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = formatDistanceKm(distance), fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colors.primary,
+                fontSize = 20.sp
+            )
+            Text(
+                text = "km", fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colors.primary,
+                fontSize = 10.sp,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
+
 }
 
 @Preview

diff --git a/...src/main/java/com/example/exercisesamplecompose/presentation/component/FormattingUtils.kt b/...src/main/java/com/example/exercisesamplecompose/presentation/component/FormattingUtils.kt
@@ -63,9 +63,6 @@ fun formatCalories(calories: Double?) = buildAnnotatedString {
         append("--")
     } else {
         append(calories.roundToInt().toString())
-        withStyle(style = MaterialTheme.typography.caption3.toSpanStyle()) {
-            append(" cal")
-        }
     }
 }
 
@@ -76,9 +73,6 @@ fun formatDistanceKm(meters: Double?) = buildAnnotatedString {
         append("--")
     } else {
         append("%02.2f".format(meters / 1_000))
-        withStyle(style = MaterialTheme.typography.caption3.toSpanStyle()) {
-            append("km")
-        }
     }
 }
 

diff --git a/...pose/app/src/main/java/com/example/exercisesamplecompose/presentation/component/HRText.kt b/...pose/app/src/main/java/com/example/exercisesamplecompose/presentation/component/HRText.kt
@@ -15,13 +15,42 @@
  */
 package com.example.exercisesamplecompose.presentation.component
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Text
 
 @Composable
 fun HRText(hr: Double?) {
-    Text(text = "${hr ?: "--"}")
+    Column {
+        Row(horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth()) {
+            Text(
+                text = "${hr ?: "--"}",
+                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colors.primary,
+                fontSize = 20.sp,
+                textAlign = TextAlign.Center
+            )
+            Text(
+                text = " bpm",
+                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colors.primary,
+                fontSize = 10.sp,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
 }
 
 @Preview