Add Golden Tiles samples (#450)

* Add component audit previews * Add 3 golden tiles - 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 * Add TODOs for the remaining tiles * Add run tile * Add Ski layout * Add simple heart rate tile layout * Add meditation chips layout * Add meditation buttons Golden Tile layout * Add timer golden tile * Add Alarm tile * Add alarm, news and weather tiles * Add Calendar tile * Add social tile * Add media tile * Remove color file * Remove unused import * Split GoldenTiles into separate files to make it easier for AS RAM * Fix incorrect colors for MeditationChips tile
android · Jul 12, 2022 · b827dff · b827dff
1 parent ddabc76
commit b827dff
Show file tree

Hide file tree

Showing 33 changed files with 1,786 additions and 45 deletions.
diff --git a/WearTilesKotlin/app/build.gradle b/WearTilesKotlin/app/build.gradle
@@ -63,29 +63,25 @@ android {
 }
 
 dependencies {
-    implementation libs.horologist.compose.layout
-
-    implementation libs.kotlinx.coroutines.android
-    implementation libs.kotlinx.coroutines.guava
-
     implementation libs.androidx.activity.compose
+    implementation libs.androidx.datastore
 
     implementation libs.androidx.wear
     implementation libs.androidx.wear.compose
     implementation libs.androidx.wear.compose.material
 
-    // Use to implement support for wear tiles
     implementation libs.androidx.wear.tiles
     implementation libs.androidx.wear.tiles.material
+    debugImplementation libs.androidx.wear.tiles.renderer
 
     implementation libs.coil
-    implementation libs.androidx.datastore
+    implementation libs.kotlinx.coroutines.android
+    implementation libs.kotlinx.coroutines.guava
 
-    // Use to preview wear tiles in your own app
-    debugImplementation libs.androidx.wear.tiles.renderer
+    debugImplementation libs.compose.ui.tooling
+    implementation libs.compose.ui.tooling.preview
 
+    implementation libs.horologist.compose.layout
     implementation libs.horologist.compose.tools
     implementation libs.horologist.tiles
-    debugImplementation libs.compose.ui.tooling
-    implementation libs.compose.ui.tooling.preview
 }
diff --git a/WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/components/ComponentAudit.kt b/WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/components/ComponentAudit.kt
@@ -0,0 +1,215 @@
+/*
+ * Copyright 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.example.wear.tiles.components
+
+import android.content.Context
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+import androidx.wear.tiles.material.Button
+import androidx.wear.tiles.material.ButtonColors
+import androidx.wear.tiles.material.ButtonDefaults
+import androidx.wear.tiles.material.Chip
+import androidx.wear.tiles.material.ChipColors
+import androidx.wear.tiles.material.Colors
+import androidx.wear.tiles.material.CompactChip
+import androidx.wear.tiles.material.TitleChip
+import com.example.wear.tiles.R
+import com.example.wear.tiles.emptyClickable
+import com.example.wear.tiles.tools.WearSmallRoundDevicePreview
+import com.google.android.horologist.compose.tools.LayoutElementPreview
+import com.google.android.horologist.compose.tools.buildDeviceParameters
+import com.google.android.horologist.tiles.images.drawableResToImageResource
+
+private const val ICON_CHECK = "check"
+private const val IMAGE_AVATAR = "avatar"
+
+private fun debugTheme(context: Context) = Colors(
+    /* primary = */ android.graphics.Color.parseColor("#FFCF48"),
+    /* onPrimary = */ android.graphics.Color.parseColor("#000000"),
+    /* surface = */ android.graphics.Color.parseColor("#414A4C"),
+    /* onSurface = */ android.graphics.Color.parseColor("#FFFFFF")
+)
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ButtonDefaultPrimary() {
+    val context = LocalContext.current
+    LayoutElementPreview(
+        Button.Builder(context, emptyClickable)
+            .setIconContent(ICON_CHECK)
+            .build()
+    ) {
+        addIdToImageMapping(ICON_CHECK, drawableResToImageResource(R.drawable.ic_baseline_check_24))
+    }
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ButtonLargeSecondary() {
+    val context = LocalContext.current
+    LayoutElementPreview(
+        Button.Builder(context, emptyClickable)
+            .setIconContent(ICON_CHECK)
+            .setSize(ButtonDefaults.LARGE_SIZE)
+            // secondary colors from our debug theme
+            .setButtonColors(ButtonColors.secondaryButtonColors(debugTheme(context)))
+            .build()
+    ) {
+        addIdToImageMapping(ICON_CHECK, drawableResToImageResource(R.drawable.ic_baseline_check_24))
+    }
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ButtonDefaultImage() {
+    val context = LocalContext.current
+    LayoutElementPreview(
+        Button.Builder(context, emptyClickable)
+            .setImageContent(IMAGE_AVATAR)
+            .build()
+    ) {
+        addIdToImageMapping(IMAGE_AVATAR, drawableResToImageResource(R.drawable.avatar))
+    }
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun TextButtonDefault() {
+    val context = LocalContext.current
+    LayoutElementPreview(
+        Button.Builder(context, emptyClickable)
+            .setTextContent("AZ")
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun TextButtonExtraLarge() {
+    val context = LocalContext.current
+    LayoutElementPreview(
+        Button.Builder(context, emptyClickable)
+            .setTextContent("AZ")
+            // default secondary colors (not our theme)
+            .setButtonColors(ButtonDefaults.SECONDARY_COLORS)
+            .setSize(ButtonDefaults.EXTRA_LARGE_SIZE)
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ChipOneLine() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        Chip.Builder(context, emptyClickable, deviceParameters)
+            .setPrimaryLabelContent("Primary label")
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ChipTwoLineLabel() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        Chip.Builder(context, emptyClickable, deviceParameters)
+            .setChipColors(ChipColors.secondaryChipColors(debugTheme(context)))
+            .setPrimaryLabelContent("Primary label")
+            .setSecondaryLabelContent("Secondary label")
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ChipIconOneLine() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        Chip.Builder(context, emptyClickable, deviceParameters)
+            .setIconContent(ICON_CHECK)
+            .setPrimaryLabelContent("Primary label")
+            .build()
+    ) {
+        addIdToImageMapping(ICON_CHECK, drawableResToImageResource(R.drawable.ic_baseline_check_24))
+    }
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun ChipTwoLineIcon() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        Chip.Builder(context, emptyClickable, deviceParameters)
+            .setIconContent(ICON_CHECK)
+            .setPrimaryLabelContent("Primary label")
+            .setSecondaryLabelContent("Secondary label")
+            .build()
+    ) {
+        addIdToImageMapping(ICON_CHECK, drawableResToImageResource(R.drawable.ic_baseline_check_24))
+    }
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun CompactChip() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        CompactChip.Builder(context, "Primary label", emptyClickable, deviceParameters)
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun CompactChipSecondaryColors() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        CompactChip.Builder(context, "Primary label", emptyClickable, deviceParameters)
+            .setChipColors(ChipColors.secondaryChipColors(debugTheme(context)))
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun TitleChip() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        TitleChip.Builder(context, "Action", emptyClickable, deviceParameters)
+            .setChipColors(ChipColors.primaryChipColors(debugTheme(context)))
+            .build()
+    )
+}
+
+@WearSmallRoundDevicePreview
+@Composable
+fun TitleChipSecondaryColors() {
+    val context = LocalContext.current
+    val deviceParameters = buildDeviceParameters(context.resources)
+    LayoutElementPreview(
+        TitleChip.Builder(context, "Action", emptyClickable, deviceParameters)
+            .setChipColors(ChipColors.secondaryChipColors(debugTheme(context)))
+            .build()
+    )
+}
diff --git a/WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow1.kt b/WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow1.kt
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.example.wear.tiles.golden
+
+import android.content.Context
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+import com.example.wear.tiles.R
+import com.example.wear.tiles.emptyClickable
+import com.example.wear.tiles.tools.WearLargeRoundDevicePreview
+import com.example.wear.tiles.tools.WearSmallRoundDevicePreview
+import com.google.android.horologist.compose.tools.LayoutRootPreview
+import com.google.android.horologist.compose.tools.buildDeviceParameters
+import com.google.android.horologist.tiles.images.drawableResToImageResource
+
+@WearSmallRoundDevicePreview
+@WearLargeRoundDevicePreview
+@Composable
+fun Goal() {
+    val context = LocalContext.current
+    LayoutRootPreview(
+        Goal.layout(context, context.deviceParams(), steps = 5168, goal = 8000)
+    )
+}
+
+@WearSmallRoundDevicePreview
+@WearLargeRoundDevicePreview
+@Composable
+fun WorkoutButtons() {
+    val context = LocalContext.current
+    LayoutRootPreview(
+        Workout.buttonsLayout(
+            context,
+            context.deviceParams(),
+            weekSummary = "1 run this week",
+            button1Clickable = emptyClickable,
+            button2Clickable = emptyClickable,
+            button3Clickable = emptyClickable,
+            chipClickable = emptyClickable,
+        )
+    ) {
+        addIdToImageMapping(
+            Workout.BUTTON_1_ICON_ID,
+            drawableResToImageResource(R.drawable.ic_run_24)
+        )
+        addIdToImageMapping(
+            Workout.BUTTON_2_ICON_ID,
+            drawableResToImageResource(R.drawable.ic_yoga_24)
+        )
+        addIdToImageMapping(
+            Workout.BUTTON_3_ICON_ID,
+            drawableResToImageResource(R.drawable.ic_cycling_24)
+        )
+    }
+}
+
+@WearSmallRoundDevicePreview
+@WearLargeRoundDevicePreview
+@Composable
+fun WorkoutLargeChip() {
+    val context = LocalContext.current
+    LayoutRootPreview(
+        Workout.largeChipLayout(
+            context,
+            context.deviceParams(),
+            clickable = emptyClickable,
+            lastWorkoutSummary = "Last session 45m"
+        )
+    )
+}
+
+@WearSmallRoundDevicePreview
+@WearLargeRoundDevicePreview
+@Composable
+fun Run() {
+    val context = LocalContext.current
+    LayoutRootPreview(
+        Run.layout(
+            context,
+            context.deviceParams(),
+            lastRunText = "2 days ago",
+            startRunClickable = emptyClickable,
+            moreChipClickable = emptyClickable
+        )
+    )
+}
+
+@WearSmallRoundDevicePreview
+@WearLargeRoundDevicePreview
+@Composable
+fun Ski() {
+    val context = LocalContext.current
+    LayoutRootPreview(
+        Ski.layout(
+            context,
+            stat1 = Ski.Stat("Max Spd", "46.5", "mph"),
+            stat2 = Ski.Stat("Distance", "21.8", "mile")
+        )
+    )
+}
+
+@WearSmallRoundDevicePreview
+@WearLargeRoundDevicePreview
+@Composable
+fun SleepTracker() {
+    // TODO: yuri has an example of this one
+}
+
+private fun Context.deviceParams() = buildDeviceParameters(resources)