Skip to content

Commit 1f98fd1

Browse files
oliexdevoliexdev
committed
Refined UI padding and widget scaling
This commit introduces several UI refinements: - **Widget Scaling:** The measurement widget now dynamically scales its content based on its size, ensuring better readability and layout across different widget dimensions. - **Consistent Padding:** Reduced and standardized vertical padding in the measurement type filter row and the goals section on the overview screen for a more compact and consistent appearance. - **TopBar Title:** The TopAppBar title now truncates with an ellipsis if it's too long to fit on one line, preventing layout issues with long user names. - **Overview Screen:** Removed an unnecessary `Spacer` and an explicit height constraint on the drag handle for a cleaner layout.
1 parent c85de04 commit 1f98fd1

4 files changed

Lines changed: 37 additions & 22 deletions

File tree

‎android_app/app/src/main/java/com/health/openscale/ui/navigation/AppNavigation.kt‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ import androidx.compose.ui.platform.LocalContext
9292
import androidx.compose.ui.res.painterResource
9393
import androidx.compose.ui.res.stringResource
9494
import androidx.compose.ui.text.input.KeyboardType
95+
import androidx.compose.ui.text.style.TextOverflow
9596
import androidx.compose.ui.unit.dp
9697
import androidx.hilt.navigation.compose.hiltViewModel
9798
import androidx.lifecycle.Lifecycle
@@ -486,7 +487,11 @@ fun AppNavigation(sharedViewModel: SharedViewModel) {
486487
},
487488
topBar = {
488489
TopAppBar(
489-
title = { Text(topBarTitle) },
490+
title = { Text(
491+
text = topBarTitle,
492+
maxLines = 1,
493+
overflow = TextOverflow.Ellipsis
494+
) },
490495
colors = TopAppBarDefaults.topAppBarColors(
491496
containerColor = Black,
492497
titleContentColor = White,

‎android_app/app/src/main/java/com/health/openscale/ui/screen/components/MeasurementTypeFilterRow.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ fun MeasurementTypeFilterRow(
184184
modifier = modifier
185185
.fillMaxWidth()
186186
.horizontalScroll(rememberScrollState())
187-
.padding(horizontal = 8.dp, vertical = 12.dp),
187+
.padding(horizontal = 8.dp, vertical = 8.dp),
188188
horizontalArrangement = Arrangement.spacedBy(spaceBetweenItems),
189189
verticalAlignment = Alignment.CenterVertically
190190
) {

‎android_app/app/src/main/java/com/health/openscale/ui/screen/overview/OverviewScreen.kt‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -621,7 +621,6 @@ fun OverviewScreen(
621621
Box(
622622
modifier = Modifier
623623
.fillMaxWidth()
624-
.height(16.dp)
625624
.pointerInput(Unit) {
626625
detectDragGestures (
627626
onDrag = { change, dragAmount ->
@@ -643,15 +642,14 @@ fun OverviewScreen(
643642
contentAlignment = Alignment.Center
644643
) {
645644
HorizontalDivider(
646-
modifier = Modifier.padding(vertical = 6.dp),
647645
thickness = 1.dp,
648646
color = MaterialTheme.colorScheme.outline.copy(alpha = 0.5f)
649647
)
650648
}
651649

652650
// Goals Section
653651
if (userGoals.isNotEmpty()) {
654-
Column(modifier = Modifier.padding(bottom = 8.dp)) {
652+
Column {
655653
Row(
656654
modifier = Modifier
657655
.fillMaxWidth()
@@ -661,7 +659,7 @@ fun OverviewScreen(
661659
sharedViewModel.setMyGoalsExpandedOverview(newIsGoalsSectionExpanded)
662660
}
663661
}
664-
.padding(horizontal = 16.dp, vertical = 12.dp),
662+
.padding(horizontal = 16.dp, vertical = 8.dp),
665663
verticalAlignment = Alignment.CenterVertically,
666664
) {
667665
Box(
@@ -674,7 +672,6 @@ fun OverviewScreen(
674672
style = MaterialTheme.typography.titleMedium
675673
)
676674
if (!isGoalsSectionExpanded && userGoals.isNotEmpty()) {
677-
Spacer(Modifier.width(6.dp))
678675
Text(
679676
text = "(${userGoals.size})",
680677
style = MaterialTheme.typography.titleMedium,
@@ -698,7 +695,6 @@ fun OverviewScreen(
698695
modifier = Modifier.fillMaxWidth(),
699696
contentPadding = PaddingValues(
700697
horizontal = 16.dp,
701-
vertical = 8.dp
702698
),
703699
horizontalArrangement = Arrangement.spacedBy(10.dp)
704700
) {

‎android_app/app/src/main/java/com/health/openscale/ui/widget/MeasurementWidget.kt‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,16 @@ import kotlinx.coroutines.flow.first
6262
import kotlinx.coroutines.withContext
6363
import java.text.DecimalFormat
6464
import androidx.compose.ui.graphics.Color
65+
import androidx.glance.LocalSize
66+
import androidx.glance.appwidget.SizeMode
6567
import androidx.glance.appwidget.state.updateAppWidgetState
6668
import com.health.openscale.core.data.IconResource
69+
import kotlin.collections.firstOrNull
6770

6871
class MeasurementWidget : GlanceAppWidget() {
6972
// Enable currentState<Preferences>() inside provideContent
7073
override val stateDefinition = PreferencesGlanceStateDefinition
74+
override val sizeMode = SizeMode.Exact
7175

7276
companion object {
7377
/** Recompose all widget instances. */
@@ -192,7 +196,7 @@ class MeasurementWidget : GlanceAppWidget() {
192196
label = t.getDisplayName(context),
193197
icon = t.icon,
194198
badgeColor = if (t.color != 0)
195-
ColorProvider(androidx.compose.ui.graphics.Color(t.color)) else null,
199+
ColorProvider(Color(t.color)) else null,
196200
symbol = symbol,
197201
evaluationState = evalState,
198202
valueWithUnit = valueWithUnit,
@@ -206,10 +210,17 @@ class MeasurementWidget : GlanceAppWidget() {
206210
val themeColors = GlanceTheme.colors
207211
val launch = Intent(context, MainActivity::class.java)
208212

213+
val size = LocalSize.current
214+
215+
val scaleFactor = minOf(
216+
size.width.value / 110f,
217+
size.height.value / 40f,
218+
4f
219+
).coerceAtLeast(0.5f)
220+
209221
Box(
210222
modifier = GlanceModifier
211223
.fillMaxSize()
212-
.padding(8.dp)
213224
.clickable(actionStartActivity(launch)),
214225
contentAlignment = Alignment.Center
215226
) {
@@ -234,7 +245,8 @@ class MeasurementWidget : GlanceAppWidget() {
234245
circleColor = uiPayload!!.badgeColor ?: themeColors.secondary,
235246
textColor = textColor,
236247
subTextColor = subTextColor,
237-
symbolColor = ColorProvider(uiPayload!!.evaluationState.toColor())
248+
symbolColor = ColorProvider(uiPayload!!.evaluationState.toColor()),
249+
scaleFactor = scaleFactor
238250
)
239251
}
240252
}
@@ -278,20 +290,22 @@ private fun ValueWithDeltaRow(
278290
circleColor: ColorProvider,
279291
textColor: ColorProvider,
280292
subTextColor: ColorProvider,
281-
symbolColor: ColorProvider
293+
symbolColor: ColorProvider,
294+
scaleFactor : Float
282295
) {
283-
Row(modifier = GlanceModifier.padding(12.dp), verticalAlignment = Alignment.CenterVertically) {
284-
GlanceRoundMeasurementIcon(icon, iconContentDescription, 28.dp, circleColor, R.drawable.ic_weight)
285-
Spacer(GlanceModifier.size(10.dp))
296+
Row(verticalAlignment = Alignment.CenterVertically) {
297+
val fontSize = 8.sp
298+
GlanceRoundMeasurementIcon(icon, iconContentDescription, 21.dp * scaleFactor, circleColor, R.drawable.ic_weight)
299+
Spacer(GlanceModifier.size(10.dp * scaleFactor))
286300
Column {
287-
Text(text = label, style = TextStyle(fontWeight = FontWeight.Medium, color = textColor))
301+
Text(text = label, style = TextStyle(fontSize = fontSize * scaleFactor, fontWeight = FontWeight.Medium, color = textColor))
288302
Row(verticalAlignment = Alignment.CenterVertically) {
289-
Text(text = valueWithUnit, style = TextStyle(color = textColor))
290-
Spacer(GlanceModifier.size(6.dp))
291-
Text(text = symbol, style = TextStyle(color = symbolColor))
303+
Text(text = valueWithUnit, style = TextStyle(fontSize = fontSize * scaleFactor, color = textColor))
304+
Spacer(GlanceModifier.size(6.dp*scaleFactor))
305+
Text(text = symbol, style = TextStyle(fontSize = fontSize * scaleFactor, color = symbolColor))
292306
}
293307
if (deltaText.isNotBlank()) {
294-
Text(text = deltaText, style = TextStyle(fontSize = 12.sp, color = subTextColor))
308+
Text(text = deltaText, style = TextStyle(fontSize = fontSize * scaleFactor, color = subTextColor))
295309
}
296310
}
297311
}
@@ -312,8 +326,8 @@ private fun GlanceRoundMeasurementIcon(
312326
}
313327
Box(
314328
modifier = GlanceModifier
315-
.size(size + 18.dp)
316-
.cornerRadius((size + 18.dp) / 2)
329+
.size(size + 24.dp)
330+
.cornerRadius((size + 18.dp) / 2f)
317331
.background(circleColor),
318332
contentAlignment = Alignment.Center
319333
) {

0 commit comments

Comments
 (0)