Add Golden Tiles samples #450

ataulm · 2022-07-10T17:17:36Z

This PR adds implementations for each of the Golden Tiles from the Wear Tiles Design Kit

Uses a snapshot of androidx tiles material components because of changes that aren't scheduled for new alphas
ComponentAudit.kt should only show individual components (e.g. Chip). Layouts will all be covered by GoldenTilesPreviews.kt
I've raised bugs for the ones for which I couldn't match the designs
I've left two unimplemented: Sleep Tracker and the graph in Heart Rate; they're not showcasing Tile Material Components so there's no rush on these.

- replacing functions and utilities which are now in Horologist - note: this is using a snapshot androidx repo so we can take advantage of changes in tiles-material-components - TODO: add remaining Golden Tiles, and remove component audit

yschimke · 2022-07-10T17:38:45Z

WearTilesKotlin/app/src/main/java/com/example/wear/tiles/golden/Workout.kt

+            .setPrimaryChipContent(
+                CompactChip.Builder(context, "More", chipClickable, deviceParameters)
+                    .setChipColors(
+                        ChipColors(


bordering on the don't review for content, but would it be helpful to implement these designs using themes using Colors? then using primary or secondary ChipColors factories?

I added a comment for this elsewhere. I'm not sure themes for tiles is worth it - as I was implementing all of these, I found it easier to specify colors explicitly.

In a real project, I imagine it'll be even less worth it:

a real project won't have many tiles

~~themes aren't directly reusable between Compose/this~~

even if they were reusable, it's not guaranteed that we'd want the same combination of colors

tiles (/wear?) is always dark mode and doesn't support dynamic theming (afaik)

I'm not sure what it provides.

The link you provided here to an example project does help show some utility - https://github.com/yschimke/rememberwear/blob/main/wear/src/main/kotlin/com/google/wear/soyted/tile/RememberWearTileRenderer.kt#L116

I think we should not introduce themes for the Golden Tiles from themes because it'll only serve to showcase the overhead without any of the benefit; unlike your RememberTheMilk project which is sharing a theme with the main app, each Golden Tile is distinct and has its own theme.

There's an example of a theme being created in ComponentAudit.kt which we can leave as-is / improve, since it's used throughout the whole file (there's no requirements/designs for different colors).

IF we want people to be able to take these tiles and copy and paste them, I think it's useful. Or maybe a library of reference tile designs, "templates" that we provide. But your call.

Let's leave it for now and we'll revisit if there's feedback. I think these samples should facilitate understanding and we shouldn't necessarily be encouraging copy and pasting.

yschimke · 2022-07-10T17:39:45Z

Direction looks, great. Would you consider using the Horologist TileRenderer abstraction, should give a nice clean separation for the data of each tile. But can understand why you may not.

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviews.kt

ataulm · 2022-07-10T17:48:24Z

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviews.kt

+fun Goal() {
+    val context = LocalContext.current
+    LayoutRootPreview(
+        Goal.layout(context, context.deviceParams(), steps = 5168, goal = 8000)


Any parameter that could change if used as a real tile is exposed.

ataulm · 2022-07-10T17:51:01Z

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviews.kt

+    ) {
+        addIdToImageMapping(
+            Workout.BUTTON_1_ICON_ID,
+            drawableResToImageResource(R.drawable.ic_run_24)


Can/should we add an ext function to whatever receiver this is?

Foo.addIdToImageMapping(String, @DrawableRes Int)

drawableResToImageResource(@DrawableRes Int) exists in Horologist already. Is the Foo only used for preview or is it the same code that would be used in a renderer?

ataulm · 2022-07-10T17:51:43Z

WearTilesKotlin/app/src/debug/res/values/colors.xml

+  ~ limitations under the License.
+  -->
+<resources>
+    <color name="yellow">#FFCF48</color>


This file will likely be deleted since we're moving away from color resources in Compose-era.

WearTilesKotlin/app/src/main/java/com/example/wear/tiles/golden/Workout.kt

ataulm · 2022-07-10T18:29:18Z

Direction looks, great. Would you consider using the Horologist TileRenderer abstraction, should give a nice clean separation for the data of each tile. But can understand why you may not.

Will be able to see when I move onto updating the samples themselves 👍

At the moment, we have 3 samples to showcase 3 layouts which seems like a lot of overhead for showcasing layouts.

When this is merged, we'll have all the Golden Tile layouts, so we can replace the samples so that they use the existing layouts. They can be used to demonstrate common/complex use cases around data stuff, not layouts.

ataulm · 2022-07-11T04:03:30Z

WearTilesKotlin/app/build.gradle

@@ -63,29 +63,25 @@ android {
 }

 dependencies {
-    implementation libs.horologist.compose.layout


just alphabetized

ataulm · 2022-07-12T15:38:04Z

Merging this for now so if people come looking for examples following our talk, there's something in the main repo. Will update as necessary following newer snapshots, and of course along with the beta/stable updates.

Ataul Munim added 4 commits June 17, 2022 16:19

Add component audit previews

7eb2e10

Merge branch 'main' into ataulm/component-audit

37dda0d

Add 3 golden tiles

0b28918

- replacing functions and utilities which are now in Horologist - note: this is using a snapshot androidx repo so we can take advantage of changes in tiles-material-components - TODO: add remaining Golden Tiles, and remove component audit

Spotless checks

bbc1842

yschimke reviewed Jul 10, 2022

View reviewed changes

ataulm commented Jul 10, 2022

View reviewed changes

Ataul Munim added 14 commits July 10, 2022 21:02

Add TODOs for the remaining tiles

a94f21b

Add run tile

6ee6acf

Add Ski layout

c5540f6

Add simple heart rate tile layout

57610fe

Add meditation chips layout

b324e27

Add meditation buttons Golden Tile layout

1ed0bc9

Add timer golden tile

3a571f6

Add Alarm tile

481509f

Add alarm, news and weather tiles

0a8eb41

Add Calendar tile

4add77d

Add social tile

9f2caa7

Add media tile

9531106

Remove color file

0a7c3aa

Remove unused import

42188bd

ataulm marked this pull request as ready for review July 11, 2022 04:01

ataulm commented Jul 11, 2022

View reviewed changes

Ataul Munim added 2 commits July 11, 2022 14:13

Split GoldenTiles into separate files to make it easier for AS RAM

85933b9

Fix incorrect colors for MeditationChips tile

0322bfa

ataulm merged commit b827dff into main Jul 12, 2022

ataulm deleted the ataulm/component-audit branch July 12, 2022 15:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Golden Tiles samples #450

Add Golden Tiles samples #450

ataulm commented Jul 10, 2022 •

edited

Loading

yschimke Jul 10, 2022

ataulm Jul 11, 2022 •

edited

Loading

ataulm Jul 11, 2022 •

edited

Loading

yschimke Jul 11, 2022

ataulm Jul 11, 2022

yschimke commented Jul 10, 2022

ataulm Jul 10, 2022

ataulm Jul 10, 2022

yschimke Jul 10, 2022

ataulm Jul 10, 2022

ataulm commented Jul 10, 2022 •

edited

Loading

ataulm Jul 11, 2022

ataulm commented Jul 12, 2022

Add Golden Tiles samples #450

Add Golden Tiles samples #450

Conversation

ataulm commented Jul 10, 2022 • edited Loading

Choose a reason for hiding this comment

ataulm Jul 11, 2022 • edited Loading

Choose a reason for hiding this comment

ataulm Jul 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yschimke commented Jul 10, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ataulm commented Jul 10, 2022 • edited Loading

Choose a reason for hiding this comment

ataulm commented Jul 12, 2022

ataulm commented Jul 10, 2022 •

edited

Loading

ataulm Jul 11, 2022 •

edited

Loading

ataulm Jul 11, 2022 •

edited

Loading

ataulm commented Jul 10, 2022 •

edited

Loading