google / horologist Goto Github PK

https://kotlinlang.org/docs/releases.html#release-details

Follow up on #90

• provide way of getting the value
• minimal tests
• API for onChange without submitting
• Remove any non localised content. AM/PM. hours, minutes, seconds.
• Review APIs
• Screenshot tests
• Theming, customising (date range, error states)
• a11y review + tests

See #286 (comment)

nit: I see the benefit of the library providing default content descriptions to the icons it displays (which can be overridden to provide translations) but I feel that displaying a text on the screen in a specific language by default is more invasive and would rather require this as parameter to the component - I might be biased and maybe I should not see any difference in between these two scenarios

Issue

The day picker is not keeping the position of the previously selected day when going to the month picker and coming back to the day picker.

Steps to reproduce

There are few ways of reproducing it, as you can see in the gif attached below, but here is one:

1. Pick Jan as month
2. Pick 31 as day
3. Pick Feb as month; day should change automatically to 28
4. Go back to day picker; do not scroll or pick another day
5. Pick Jan as month
6. Go back to day picker

Expected result

Day picker should display day 28.

Actual result

Day picker displays day in between 30 and 31.

Video

Preview	Emulator

The other previews are fine:

The code for the layout:

@WearLargeRoundDevicePreview
@Composable
fun Cir() {
    val context = LocalContext.current
    val deviceParameters = buildDeviceParameters(context.resources)
    LayoutPreview(
        ProgressIndicatorLayout.Builder(deviceParameters)
            .setPrimaryLabelTextContent(
                Text.Builder(context, "Steps")
                    .setTypography(Typography.TYPOGRAPHY_CAPTION1)
                    .setColor(
                        ColorBuilders.argb(
                            ContextCompat.getColor(
                                context,
                                R.color.primary
                            )
                        )
                    )
                    .build()
            )
            .setSecondaryLabelTextContent(
                Text.Builder(context, "5168")
                    .setTypography(Typography.TYPOGRAPHY_CAPTION1)
                    .setColor(
                        ColorBuilders.argb(
                            ContextCompat.getColor(
                                context,
                                R.color.white
                            )
                        )
                    )
                    .build()
            )
            .setProgressIndicatorContent(
                CircularProgressIndicator.Builder()
                    .setProgress(5168f/8000)
                    .setCircularProgressIndicatorColors(
                        ProgressIndicatorColors(
                            /* indicatorColor = */ ColorBuilders.argb(ContextCompat.getColor(context, R.color.primary)),
                            /* trackColor = */ ColorBuilders.argb(Color(1f, 1f, 1f, 0.1f).toArgb())
                        )
                    )
                    .build()
            )
            .setContent(
                Text.Builder(context, "/ 8000")
                    .setTypography(Typography.TYPOGRAPHY_DISPLAY1)
                    .setColor(
                        ColorBuilders.argb(
                            ContextCompat.getColor(
                                context,
                                R.color.white
                            )
                        )
                    )
                    .build()
            )
            .build()
    )
}

Horologist: 0.0.23
Tiles Material Components: https://androidx.dev/snapshots/builds/8730571/artifacts

StandardChip placeholder icon should have an alpha applied in order to change the color when on disabled state.

Compare:

Our implementation relies on Chip from androidx.wear.compose.material which seems to implement this functionality. From the kdoc:

In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

However, our implementation uses Coil's rememberAsyncImagePainter to display a placeholder, which receives a Painter type as placeholder, and might not work well with that alpha applied in Chip.

Expected outcome from this task

• PrimaryChip preview for disabled state displays placeholder icon with correct alpha applied
• SecondaryChip preview for disabled state displays placeholder icon with correct alpha applied
• Other previews for PrimaryChip and SecondaryChip are not affected
• PrimaryChip snapshot test for disabled state displays placeholder icon with correct alpha applied
• SecondaryChip snapshot test for disabled state displays placeholder icon with correct alpha applied
• Other snapshot tests for PrimaryChip and SecondaryChip are not affected

Building on https://developer.android.com/training/wearables/health-services

Areas to consider

• Service implementation for correct handling of activities
• Storage of Health Data and Activity in Room DB
• Ongoing Activity template
• Mobile/Watch data layer and data syncing.

This setup doesn't work because the list can never be in the position where it should show time text.

    WearNavScaffold(
        startDestination = NavScreen.Menu.route,
        navController = navController,
        // state = navState
    ) {
        scalingLazyColumnComposable(
            route = NavScreen.Menu.route,
            scrollStateBuilder = { ScalingLazyListState(initialCenterItemIndex = 0) }
        ) {

    ScalingLazyColumn(
        modifier = modifier.scrollableColumn(focusRequester, scrollState),
        state = scrollState,
        horizontalAlignment = Alignment.CenterHorizontally,
        autoCentering = AutoCenteringParams(itemIndex = 1, itemOffset = 30),
    ) {

Changing autocentering to itemIndex to be 0 works, so this isn't a critical bug.

But also the fix to scrollStateBuilder isn't great either, as it doesn't work for 1/30, but 2,-30 does???

scrollStateBuilder = { ScalingLazyListState(initialCenterItemIndex = 2, initialCenterItemScrollOffset = -30) }

A single developer experience for drawn canvas elements. Using DrawScope as the API to make reusable canvas components.

Then render to

• compose Canvas for apps.
• native canvas for watchfaces (potentially complicated by performance considerations)
• bitmap canvas for Tiles, Glance Widgets/Tiles.
• compose canvas for development @previews - for all of the above.

https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope

id "com.diffplug.spotless" version "5.9.0"

should be

alias(libs.plugins.spotless) apply false

See android/wear-os-samples#399

cc @ataulm

Both icons and colours.

When launched from the Media sample app, the bluetooth settings screen does not stay open when there is a connected device.

Devices:

• Galaxy Watch4 Classic (4W2J) - SM-R895F
• Galaxy Buds2 - SM-R177

Steps to reproduce

1. Make sure the watch has a bluetooth device connected to it
2. Launch app - player screen is displayed with a media
3. Push Audio output button

Expected result

Bluetooth settings screen is displayed.

Actual result

Bluetooth settings screen is launched and closed immediately.

Paparazzi snapshot tests does not fail when it should. I don't think it happens 100% of the time, but it's frequently enough.

Previously noticed in #292

Recently noticed after submitting this commit which removes all the usages of WearSnapshotHandler. So all screenshots went from circle to square. And the snapshots tests passed. We can see in the logs in CI that most of the tasks are marked as "UP-TO-DATE" when running verifyPaparazziDebug:

> Task :media-ui:testDebugUnitTest UP-TO-DATE
> Task :media-ui:verifyPaparazziDebug UP-TO-DATE

Potentially related to cashapp/paparazzi#388.

Either make it an overridable param, or expose configuring the builder.

WHAT

Add appropriate icon for SeekFowardButton for when seekButtonIncrement param is SeekButtonIncrement.Unknown.

WHY

In order to match the icon displayed for SeekBackButton:

SeekBackButton	SeekForwardButton

There is no matching icon in the default material design icon lib.

Media sample app freezes and crashes after going back (swipe back without selecting any output) from Audio output screen. This only happens if the Audio output screen is launched after pushing the "play" button on the player screen. If the Audio output button is pushed instead, the issue does NOT happen.

Video:

Logs:

2022-06-27 10:42:51.090  6644-6644  InputMethodManager      com....horologist.mediasample.debug  I  startInputInner - mService.startInputOrWindowGainedFocus
2022-06-27 10:42:53.000   578-7953  ActivityManager         pid-578                              E  ANR in com.google.android.horologist.mediasample.debug (com.google.android.horologist.mediasample.debug/com.google.android.horologist.mediasample.components.MediaActivity)
                                                                                                    PID: 6644
                                                                                                    Reason: Input dispatching timed out (48d7fbd com.google.android.horologist.mediasample.debug/com.google.android.horologist.mediasample.components.MediaActivity (server) is not responding. Waited 10004ms for FocusEvent(hasFocus=false))
                                                                                                    Parent: com.google.android.horologist.mediasample.debug/com.google.android.horologist.mediasample.components.MediaActivity
                                                                                                    Load: 22.88 / 22.51 / 11.03

Device: Galaxy Watch4 Classic (4W2J) - SM-R895F

Steps to reproduce

1. Make sure the watch does not have any bluetooth device connected
2. Launch app - player screen is displayed with a media
3. Push play - bluetooth settings screen is displayed
4. Swipe back

Expected result

Player screen is displayed, in an idle/paused state, and app is not frozen.

Actual result

Player screen is displayed, in an idle/paused state, but app is frozen (nothing happens when tapping on any buttons) and after few seconds the app closes (crashes).

• Review APIs
• Screenshot tests
• Theming, customising (date range, error states)

The bugs, both caused by framework changes, and 1 I introduced myself show we need more test coverage here.

com.google.android.horologist.compose.snackbar.SnackbarHostTest > snackbarHost_returnedResult[test(AVD) - 11] FAILED 
	androidx.compose.ui.test.ComposeTimeoutException: Condition still not satisfied after 5000 ms
	at androidx.compose.ui.test.AndroidComposeTest.waitUntil(ComposeTest.android.kt:218)

Have disabled for now in #65

Look if we can build upon https://google.github.io/modernstorage/

And provide photos pickers for

• Remote / API catalogs?
• Local storage
• Paired Mobile (with Helper?)

Implement a base class for a CompoundPicker handling most of the complexity of Data and Time Pickers and allowing for simple implementations of others.

After execution of this step in CI we can see in the logs like:

> Task :composables:testDebugUnitTest
See the Paparazzi report at: file:///home/runner/work/horologist/horologist/composables/build/reports/paparazzi/index.html

But the artifacts generated by CI never contain these reports, even after explicitly adding a configuration to archive them in #337.

WHAT

Change implementation of SecondaryPlaceholderChip to use Chip instead of building everything from scratch, and pass the grey shapes as params to label, secondaryLabel, and icon.

PS: remember to remove this dependency from the module when done.

WHY

#328 (comment)

Expected outcome from this task

• Implementation of SecondaryPlaceholderChip is changed to use Chip;
• Preview for SecondaryPlaceholderChip is not affected;
• Snapshot test for SecondaryPlaceholderChip is not affected;

Umbrella bugs for Flaky or Broken tests on emulators.

We should look at how to implement non-flaky, such as Robolectric for most tests.

See #307 (comment)

See #286 (comment)

given the UI layer has its own model PlayerUiState, it could be changed to attend the specific needs of the UI classes, e.g. playerUiState.loading instead of playerUiState.connected; or playerUiState.mediaDisplayStatus be either of values Loading, Playing or NotPlaying.

Use modes like playing, loading etc.

https://google.github.io/horologist/#tiles

Consider what a Compose Ambient mode support library would include, looking at android/wear-os-samples#189

The mandatory modifier it is clumsy, we should apply the scaling externally, say in a containing box.

        WearNavScaffold(
            modifier = modifier,
            startDestination = NavigationScreens.Player.route + "?page={page}",
            timeText = {
                    TimeText(modifier = it)
            },

I think it would be good for the Button on the multi-picker screens to step through the pickers. For example, start on Day and offer '>', and clicking takes you to the Month (stays as a '>'), then when you click onto the Year, it changes to the Check icon and commits the choice.

See #300 (comment)

But also we should have a nicer API for params extraction and also building the params to navigate to.

Consider a Coil image utility for Tiles

Example https://github.com/android/wear-os-samples/blob/65b0468db06427fdd07c5697ba97afe7c4d5f082/WearTilesKotlin/app/src/main/java/com/example/wear/tiles/messaging/images.kt

fun idToImageResource(id: Int) = ImageResource.Builder()
       .setAndroidResourceByResId(
               AndroidImageResourceByResId.Builder()
                       .setResourceId(id)
                       .build()
       )
       .build()

From here:

https://github.com/joreilly/PeopleInSpace/pull/139/files#diff-4058974ed1ff8fbb817967ab294ee5a8b422543b015c50cf3481cc2fddffbe0cR119-R126

I'm using it for a component audit (in combination with LayoutPreview) but presumably it's handy for the tile renderer too.

Notes:

• consider adding @DrawableRes to the function

WHAT

Do not run tests with LargeTest annotation in CI.

WHY

It was the intention of #304

However, it looks like they are still running as this recent PR failed with:

com.google.android.horologist.mediasample.playback.PlaybackNotificationTest > testCausesNotification[test(AVD) - 9] FAILED 
	expected to be true
	at com.google.android.horologist.mediasample.playback.PlaybackNotificationTest$testCausesNotification$1$1.invokeSuspend(PlaybackNotificationTest.kt:63)
Tests on test(AVD) - 9 failed: There was 1 failure(s).

And the test that failed is annotated with LargeTest.

On the Media sample app, the media title is being trimmed on the left side:

Devices:

• Galaxy Watch4 Classic (4W2J) - SM-R895F
• Emulator - Wear OS Large Round API 30

The issue become apparent on the PlayerScreen preview once the title length is increased:

Network selection library for efficient, correct and validated network selection logic in 3P apps.

Uplift the network selection logic from the media reference app.

/**
 * Implementation of app rules for network usage.  A way to implement logic such as
 * - Don't download large media items over BLE.
 * - Only use LTE for downloads if user enabled.
 * - Don't use metered LTE for logs and metrics.
 */
interface NetworkingRules {
    /**
     * Is this request considered high bandwidth and should activate LTE or Wifi.
     */
    fun isHighBandwidthRequest(requestType: RequestType): Boolean

    /**
     * Checks whether this request is allowed on the current network type.
     */
    fun checkValidRequest(
        requestType: RequestType,
        currentNetworkType: NetworkType
    ): RequestCheck

    /**
     * Returns the preferred network for a request.
     */
    fun getPreferredNetwork(
        networks: Networks,
        requestType: RequestType
    ): NetworkStatus?

class NetworkRepository(
    val connectivityManager: ConnectivityManager,
    val coroutineScope: CoroutineScope,
    val logger: NetworkStatusLogger,
) {
...
    val networkStatus: MutableStateFlow<Networks>

Most of the tests are failing in CI with:

java.lang.NullPointerException: goldenImage must not be null
	at app.cash.paparazzi.SnapshotVerifier$newFrameHandler$1.handle(SnapshotVerifier.kt:53)
	at com.google.android.horologist.paparazzi.WearSnapshotHandler$newFrameHandler$1.handle(WearSnapshotHandler.kt:57)
	at app.cash.paparazzi.Paparazzi$takeSnapshots$1$2.invoke(Paparazzi.kt:302)
	at app.cash.paparazzi.Paparazzi$takeSnapshots$1$2.invoke(Paparazzi.kt:295)
	at app.cash.paparazzi.Paparazzi.withTime(Paparazzi.kt:336)
	at app.cash.paparazzi.Paparazzi.takeSnapshots(Paparazzi.kt:295)
	at app.cash.paparazzi.Paparazzi.snapshot(Paparazzi.kt:211)
	at app.cash.paparazzi.Paparazzi.snapshot(Paparazzi.kt:204)
	at app.cash.paparazzi.Paparazzi.snapshot$default(Paparazzi.kt:195)
	at com.google.android.horologist.media.ui.FigmaVolumeScreenTest.volumePlayerScreen(FigmaVolumeScreenTest.kt:46)

The stacktrace above can be seen in the test reports in the archived artifact. In the actions logs it displays the following:

com.google.android.horologist.media.ui.FigmaVolumeScreenTest > volumePlayerScreen FAILED
    java.lang.NullPointerException at FigmaVolumeScreenTest.kt:46

...

53 tests completed, 35 failed
> Task :media-ui:testDebugUnitTest FAILED

Some investigation reported here.

Usage of WearSnapshotHandler was removed in #338 for now.

After merging #322, build step in main branch got green.

However, the PRs that are up to date with main branch started to fail with:

com.google.android.horologist.audio.ui.VolumeScreenIndividualTest > volumeScreenAtMaximum FAILED
    java.lang.NullPointerException at VolumeScreenIndividualTest.kt:66
com.google.android.horologist.audio.ui.VolumeScreenIndividualTest > volumeScreenAtMinimum FAILED
    java.lang.NullPointerException at VolumeScreenIndividualTest.kt:49
com.google.android.horologist.audio.ui.VolumeScreenIndividualTest > volumeScreenWithLongTest FAILED
    java.lang.NullPointerException at VolumeScreenIndividualTest.kt:83

Once again, main is green, but the PRs that are up to date with main branch started to fail with:

com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[0] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56
com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[1] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56
com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[2] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56
com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[3] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56
com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[4] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56
com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[5] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56
10 tests completed, 7 failed, 3 skipped
com.google.android.horologist.audio.ui.VolumeScreenThemeTest > volumeScreenThemes[6] FAILED
    java.lang.NullPointerException at VolumeScreenThemeTest.kt:56

Time pickers have hours minutes and seconds currently with no way to disable seconds - make seconds optional as hours & minutes and hours, minutes and seconds are both useful combinations

TimePicker's AM/PM label is shrunk after updating to wear-compose 1.0.0-rc01:

The current conversion code for bitmaps and canvas elements to Tile ImageResources, uses RGB_565.

This is safe format, but requires extra work and also does not support alpha channel.

We should add a flag to support other formats including png, webp.

This probably involves removing hard coded format when flag is set

setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)

and use, or other conversion code.

    val bytes = ByteArrayOutputStream().apply {
        compress(Bitmap.CompressFormat.PNG, 100, this)
    }.toByteArray()

We can assume Coil for our conversion code if it helps, and to start with avoiding conversions, but to be confirmed.

A later change might be also this code path https://github.com/google/horologist/blob/2f15272f92291bcdbdacd66b1042e42802c45cb7/tiles/src/main/java/com/google/android/horologist/tiles/canvas/canvas.kt

Currently the entire preview has Gray and Black

https://github.com/google/horologist/pull/218/files#r895885412

The audio output chip on the VolumeScreen is displayed with full width on the screenshot at the page: https://google.github.io/horologist/audio-ui/

However, the chip does not seem to be taking the full width available of the screen:

physical watch	android studio preview

PS: I also checked the preview with d29eed9 (before project was updated to wear compose beta02) and the result is the same.

Implement a picker for Currency amounts.

See https://github.com/google/horologist/blob/d6a12251b19cfce2d7d0a7c48c18caf02d1120c5/composables/src/main/java/com/google/android/horologist/composables/DatePicker.kt for a template of the approach.

A PR like #30 is evidence that we are not stable,
and we build on Alpha software.

We need to use Experimental annotations to make this clear.

For example Modifier.roundDevicePadding(width = 1f). This is sometimes neccesary to add to the final item to ensure it can be scrolled high enough to be not cutoff.

See this clumsy fix https://github.com/joreilly/PeopleInSpace/pull/131/files

Similar to API at https://google.github.io/accompanist/insets/ for insets.