diff --git a/composables/src/main/java/com/google/android/horologist/composables/TimePicker.kt b/composables/src/main/java/com/google/android/horologist/composables/TimePicker.kt index ff5c7529e8..9436597d36 100644 --- a/composables/src/main/java/com/google/android/horologist/composables/TimePicker.kt +++ b/composables/src/main/java/com/google/android/horologist/composables/TimePicker.kt @@ -35,7 +35,6 @@ import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentSize @@ -169,7 +168,6 @@ public fun TimePicker( (0..9).maxOf { mm.getBoundingBox(it).width } } val pickerWidth = with(LocalDensity.current) { (digitWidth * 2).toDp() + 6.dp } - val usableWidthRatio = 1 - 2 * 0.0728f val optionColor = MaterialTheme.colors.secondary val pickerOption = pickerTextOption(textStyle, { "%02d".format(it) }) @@ -238,7 +236,7 @@ public fun TimePicker( Spacer(Modifier.height(4.dp)) Row( // Horizontal padding is 2.08% + 5.2% - modifier = Modifier.fillMaxWidth(usableWidthRatio).weight(1f), + modifier = Modifier.fillMaxWidth(1 - 2 * 0.0728f).weight(1f), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center, ) { @@ -385,8 +383,17 @@ public fun TimePickerWith12HourClock( rememberPickerGroupState(FocusableElement12Hour.HOURS.index) } + val isLargeScreen = LocalConfiguration.current.screenWidthDp > 225 val textStyle = - with(LocalDensity.current) { fontScaleIndependent(MaterialTheme.typography.display3) } + with(LocalDensity.current) { + fontScaleIndependent( + if (isLargeScreen) { + MaterialTheme.typography.display2 + } else { + MaterialTheme.typography.display3 + }, + ) + } val focusRequesterConfirmButton = remember { FocusRequester() } @@ -425,6 +432,24 @@ public fun TimePickerWith12HourClock( } } + val measurer = rememberTextMeasurer() + val density = LocalDensity.current + val (digitWidth, amPmWidth) = remember( + density.density, + LocalConfiguration.current.screenWidthDp, + ) { + val mm = measurer.measure( + "0123456789\n$amString\n$pmString", + style = textStyle, + density = density, + ) + + (0..9).maxOf { mm.getBoundingBox(it).width } to + (1..2).maxOf { mm.getLineRight(it) - mm.getLineLeft(it) } + } + val pickerWidth = with(LocalDensity.current) { (digitWidth * 2).toDp() + 6.dp } + val pickerWidth2 = with(LocalDensity.current) { amPmWidth.toDp() + 6.dp } + ScreenScaffold( modifier = modifier .fillMaxSize() @@ -436,7 +461,7 @@ public fun TimePickerWith12HourClock( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { - Spacer(Modifier.height(12.dp)) + Spacer(Modifier.height(14.dp)) Text( text = when (FocusableElement12Hour[pickerGroupState.selectedIndex]) { FocusableElement12Hour.HOURS -> hourString @@ -447,14 +472,9 @@ public fun TimePickerWith12HourClock( style = MaterialTheme.typography.button, maxLines = 1, ) - val weightsToCenterVertically = 0.5f - Spacer( - Modifier - .fillMaxWidth() - .weight(weightsToCenterVertically), - ) + Spacer(Modifier.height(4.dp)) Row( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier.fillMaxWidth(1 - 2 * 0.0728f).weight(1f), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center, ) { @@ -470,15 +490,10 @@ public fun TimePickerWith12HourClock( } } - // TODO remove the offsets below, once checked with UX - // these are to refactor the code, remove spacers without changing - // visible layout at the same time. PickerGroup( pickerGroupItemWithRSB( pickerState = hourState, - modifier = Modifier - .size(57.dp, 100.dp) - .offset(x = (2.5).dp), + modifier = Modifier.width(pickerWidth).fillMaxHeight(), onSelected = { doubleTapToNext( FocusableElement12Hour.HOURS, @@ -490,9 +505,7 @@ public fun TimePickerWith12HourClock( ), pickerGroupItemWithRSB( pickerState = minuteState, - modifier = Modifier - .size(53.dp, 100.dp) - .offset(x = (-0.5).dp), + modifier = Modifier.width(pickerWidth).fillMaxHeight(), onSelected = { doubleTapToNext( FocusableElement12Hour.MINUTES, @@ -504,9 +517,7 @@ public fun TimePickerWith12HourClock( ), pickerGroupItemWithRSB( pickerState = periodState, - modifier = Modifier - .size(68.dp, 100.dp) - .offset(x = (3).dp), + modifier = Modifier.width(pickerWidth2).fillMaxHeight(), contentDescription = periodContentDescription, onSelected = { doubleTapToNext( @@ -518,21 +529,17 @@ public fun TimePickerWith12HourClock( if (it == 0) amString else pmString }), ), + modifier = Modifier.fillMaxSize(), autoCenter = false, + expandToFillWidth = true, pickerGroupState = pickerGroupState, separator = { - if (it == 0) { - Separator(textStyle) - } + if (it == 0) Separator(textStyle) }, touchExplorationStateProvider = touchExplorationStateProvider, ) } - Spacer( - Modifier - .fillMaxWidth() - .weight(weightsToCenterVertically), - ) + Spacer(Modifier.height(4.dp)) Button( onClick = { val confirmedTime = LocalTime.of( diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[0]_BlueDefaultAECBFA.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[0]_BlueDefaultAECBFA.png index e664ac7b81..2ff0f1eeee 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[0]_BlueDefaultAECBFA.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[0]_BlueDefaultAECBFA.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0e62daf5e077d87489554a55148d7dd380f8dc4af12bbec2ca59d301c40e0eaa -size 26116 +oid sha256:fe7faf77cf2c50d65df5b6b011853439b5552a245e183fd16f47ecdba2a32bb0 +size 27679 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[1]_Blue7FCFFF.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[1]_Blue7FCFFF.png index c8d37ca36b..532e055786 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[1]_Blue7FCFFF.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[1]_Blue7FCFFF.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0a500332cbd081474f45e4510869578c75f4c53207292108dfa56aea80416097 -size 26010 +oid sha256:677efdf97280ee9cf01efd3fc4a339a321731144dbdcb6fb0ccdbc0e201c6f24 +size 27907 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[2]_LilacD0BCFF.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[2]_LilacD0BCFF.png index 7ccffdb5bf..404dab72b5 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[2]_LilacD0BCFF.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[2]_LilacD0BCFF.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:85e88883187f8ff647d11d18429aee8d188cb8a2f48c6ef68e8a2506b27cbec8 -size 26077 +oid sha256:8e3da432d7efa7cebe9f11da4baa9b0fd3b5e2d25182f8854a0742ef7fed9a5b +size 27772 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[3]_Green6DD58C.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[3]_Green6DD58C.png index 7a939a8f94..9a8c99f3d0 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[3]_Green6DD58C.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[3]_Green6DD58C.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a400fdc378cff25764d883a9ff53010ee21454999283c778ede863aff73014d8 -size 25809 +oid sha256:6fc5174e9d78a96e569f53168a49ec7cf7eda77569053228056a23618e8a4f18 +size 27475 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[4]_BluewithText7FCFFF.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[4]_BluewithText7FCFFF.png index 6825034252..2aab55dc56 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[4]_BluewithText7FCFFF.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[4]_BluewithText7FCFFF.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:16c003154f3bb4a8b4eb682e187a48396c524705131a21ed03f662aba76cfcee -size 25974 +oid sha256:ea2c3df7c0fcd71a136bf38d339fdcadbc5427483686e17d2701c4cea1e2ab41 +size 27876 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[5]_Orangey.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[5]_Orangey.png index b5cb1eadf9..8553135d8c 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[5]_Orangey.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[5]_Orangey.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:352547eb249abbc6d3ba3632669d119e6d7fd13dde610faea5ef6029ecae4353 -size 25814 +oid sha256:4d0317095579c2e671059b0693483e91d170d5141c6675012559f632431da453 +size 27397 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[6]_Uamp.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[6]_Uamp.png index c350e0f816..7834de3968 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[6]_Uamp.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_PickerThemeTest_timePicker12h[6]_Uamp.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6a191673dd42fa66eb1abf33ff170aa2fa026b9a13d20c51d4e4d404f3860cc7 -size 25629 +oid sha256:399e47d3396af178c2175369805a5ebdda2f80bb904eb2532036a686f1251a79 +size 27285 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_initial.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_initial.png index e664ac7b81..2ff0f1eeee 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_initial.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_initial.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0e62daf5e077d87489554a55148d7dd380f8dc4af12bbec2ca59d301c40e0eaa -size 26116 +oid sha256:fe7faf77cf2c50d65df5b6b011853439b5552a245e183fd16f47ecdba2a32bb0 +size 27679 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_largestFontScaling.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_largestFontScaling.png index 51c9b35b23..f2ded2f5b9 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_largestFontScaling.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_largestFontScaling.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:33694fcdf4e146fc539c7715e8ace49f2833d3ffee251ae86439717f655785cd -size 26339 +oid sha256:3d38e641ca2d9eed0eb847d51270c9f7f364c65f08583f463b35a4bdf8cd95b3 +size 27646 diff --git a/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_smallDeviceLargeFontBold.png b/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_smallDeviceLargeFontBold.png index 5e2cd593d8..ac806ce5d0 100644 --- a/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_smallDeviceLargeFontBold.png +++ b/composables/src/test/snapshots/images/com.google.android.horologist.composables_TimePicker12hTest_smallDeviceLargeFontBold.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b7d70d653819d605f5c2eb3e580a69abc0b1c0f5b32de47f124ff7f94f4b2650 -size 24067 +oid sha256:17bab765d5e9df907dfaf22f8a2d1b4a07aa9d14117b37f3015ce4f2255d66d1 +size 23739 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[0]_mobvoiticwatchpro5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[0]_mobvoiticwatchpro5.png index 3bb556fdea..da2a35bc35 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[0]_mobvoiticwatchpro5.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[0]_mobvoiticwatchpro5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c0422f4b30000b3d04b7e23c38d56a2fbdb2c1d80c88d83e8d8127545585aae8 -size 21755 +oid sha256:58d49b30eacbe552b083301e4298bf4fdb031c6479786224b5567016c9eb9922 +size 28038 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[1]_samsunggalaxywatch5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[1]_samsunggalaxywatch5.png index 4201e41d0b..d82a0a1f9c 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[1]_samsunggalaxywatch5.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[1]_samsunggalaxywatch5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6736fcbdedb948e51157ecc95873993bf9620052809201ef4f3083781f44f6ac -size 23468 +oid sha256:a031c5f3be34e06799d1ca0508ae767f88582df984688cff039cf03a8e1af92e +size 23385 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[2]_samsunggalaxywatch6large.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[2]_samsunggalaxywatch6large.png index 92e86e32e2..c2ec0557ee 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[2]_samsunggalaxywatch6large.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[2]_samsunggalaxywatch6large.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7462a0ab48c490369ed8feb8441afe5d95efe299a247d90d77c572eed2f52974 -size 27300 +oid sha256:8e2e8b54129efa0347ec0c296541f2a0df0f56858ada7ab02702f6d68d5dab11 +size 29321 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[3]_googlepixelwatch.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[3]_googlepixelwatch.png index 8dd0ac9d32..557d37a7d6 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[3]_googlepixelwatch.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[3]_googlepixelwatch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:657b9e64144ad0ace3c1424dbcb5c19819b1dc742b4c33758cd5077ef9f8bb23 -size 23239 +oid sha256:ea631b5f9c0410308d6b788eba808f2df0747d337bb7ebe5efffee0bc66ebd00 +size 22766 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[4]_genericsmallround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[4]_genericsmallround.png index 8dd0ac9d32..557d37a7d6 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[4]_genericsmallround.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[4]_genericsmallround.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:657b9e64144ad0ace3c1424dbcb5c19819b1dc742b4c33758cd5077ef9f8bb23 -size 23239 +oid sha256:ea631b5f9c0410308d6b788eba808f2df0747d337bb7ebe5efffee0bc66ebd00 +size 22766 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[5]_genericlargeround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[5]_genericlargeround.png index 15b651d2c7..8e503d2427 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[5]_genericlargeround.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[5]_genericlargeround.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5977a905161905a15065aca47f9febb1967e059dc2e71545d3e170e6c13e22d9 -size 21447 +oid sha256:4d1d793a74f0afcc3335422e7bc1b3130c9e5a3d7c0380ed02b1cd00cdd12632 +size 27019 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[6]_smalldevicebigfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[6]_smalldevicebigfonts.png index 925dabe58d..148af4d489 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[6]_smalldevicebigfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[6]_smalldevicebigfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:21f4be93ff5b725efadf8a088f7f78a7048c59e4cb41aa005c151601fef0b43c -size 23343 +oid sha256:7c62c4b0cd8761ae3d8ce620643f93a8230d78b2057a3d86ca867927e497a525 +size 22933 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[7]_largedevicesmallfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[7]_largedevicesmallfonts.png index ef703674a3..bb990d91df 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[7]_largedevicesmallfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_TimePicker12Test_screenshot[7]_largedevicesmallfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:89a7df1a6c843f867b6848dbc9e8b6b5c6de1ffe625019443cfa220818c699e6 -size 21643 +oid sha256:227c1ad37e2359c3ffe0766a0b1a581567bb81c0039eedb10482979380e3d5a8 +size 28138