Adopt Tiles Material and use Android Studio Previews

buildSrc/src/main/java/Dependencies.kt

@@ -19,7 +19,8 @@ object Versions {
     const val wearCompose = "1.0.0-beta01"
     const val navCompose = "2.4.2"
     const val accompanist = "0.23.0"
-    const val horologist = "0.0.19"
+    const val horologist = "0.0.23"
+    const val androidxTiles = "1.1.0-alpha08"
 
     const val composeDesktopWeb = "1.2.0-alpha01-dev683"
     const val composeIos = "1.2.0-alpha01-dev683"
@@ -83,6 +84,8 @@ object Deps {
         const val testEspressoCore = "androidx.test.espresso:espresso-core:3.4.0"
         const val testExtJunit = "androidx.test.ext:junit:1.1.3"
         const val testUiautomator = "androidx.test.uiautomator:uiautomator:2.2.0"
+        const val wearTiles = "androidx.wear.tiles:tiles:${Versions.androidxTiles}"
+        const val wearTilesMaterial = "androidx.wear.tiles:tiles-material:${Versions.androidxTiles}"
     }
 
     object Test {
@@ -170,11 +173,12 @@ object Deps {
     }
 
     object Glance {
-        const val tiles = "androidx.glance:glance-wear-tiles:1.0.0-alpha03"
         const val appwidget = "androidx.glance:glance-appwidget:1.0.0-alpha03"
     }
 
     object Horologist {
-        const val composeLayout = "com.google.android.horologist:horologist-compose-layout:0.0.17"
+        const val composeLayout = "com.google.android.horologist:horologist-compose-layout:${Versions.horologist}"
+        const val composeTools = "com.google.android.horologist:horologist-compose-tools:${Versions.horologist}"
+        const val tiles = "com.google.android.horologist:horologist-tiles:${Versions.horologist}"
     }
 }

wearApp/build.gradle.kts

@@ -4,7 +4,7 @@ plugins {
 }
 
 android {
-    compileSdk = Versions.androidCompileSdk
+    compileSdk = 32
 
     defaultConfig {
         applicationId = "com.surrus.peopleinspace"
@@ -23,7 +23,10 @@ android {
 
     kotlinOptions {
         freeCompilerArgs += "-opt-in=kotlin.RequiresOptIn"
-        freeCompilerArgs += "-opt-in=com.google.android.horologist.compose.navscaffold.ExperimentalComposeLayoutApi"
+        freeCompilerArgs += "-opt-in=com.google.android.horologist.compose.navscaffold.ExperimentalHorologistComposeLayoutApi"
+        freeCompilerArgs += "-opt-in=androidx.compose.ui.ExperimentalComposeUiApi"
+        freeCompilerArgs += "-opt-in=com.google.android.horologist.tiles.ExperimentalHorologistTilesApi"
+        freeCompilerArgs += "-opt-in=com.google.android.horologist.compose.tools.ExperimentalHorologistComposeToolsApi"
     }
 
     buildTypes {
@@ -62,6 +65,8 @@ dependencies {
     with(Deps.AndroidX) {
         implementation(activityCompose)
         implementation(metrics)
+        implementation(wearTiles)
+        implementation(wearTilesMaterial)
     }
 
     with(Deps.Compose) {
@@ -97,12 +102,10 @@ dependencies {
         debugImplementation(composeUiTestManifest)
     }
 
-    with(Deps.Glance) {
-        implementation(tiles)
-    }
-
     with(Deps.Horologist) {
         implementation(composeLayout)
+        implementation(tiles)
+        implementation(composeTools)
     }
 
     implementation(project(":common"))

wearApp/src/main/java/com/surrus/peopleinspace/di/AppModule.kt

@@ -7,6 +7,7 @@ import com.surrus.peopleinspace.BuildConfig
 import com.surrus.peopleinspace.list.PersonListViewModel
 import com.surrus.peopleinspace.map.MapViewModel
 import com.surrus.peopleinspace.person.PersonDetailsViewModel
+import com.surrus.peopleinspace.tile.PeopleInSpaceTileRenderer
 import org.koin.android.ext.koin.androidContext
 import org.koin.androidx.viewmodel.dsl.viewModel
 import org.koin.dsl.module
@@ -34,4 +35,8 @@ val wearImageLoader = module {
             }
             .build()
     }
+
+    single {
+        PeopleInSpaceTileRenderer(androidContext())
+    }
 }

wearApp/src/main/java/com/surrus/peopleinspace/list/PersonListScreen.kt

@@ -1,3 +1,7 @@
+@file:OptIn(ExperimentalHorologistComposeToolsApi::class,
+    ExperimentalHorologistComposeLayoutApi::class, ExperimentalComposeUiApi::class
+)
+
 package com.surrus.peopleinspace.list
 
 import androidx.compose.foundation.Image
@@ -23,7 +27,6 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTagsAsResourceId
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.Button
 import androidx.wear.compose.material.ButtonDefaults
@@ -33,7 +36,10 @@ import androidx.wear.compose.material.ScalingLazyColumn
 import androidx.wear.compose.material.ScalingLazyListState
 import androidx.wear.compose.material.Text
 import androidx.wear.compose.material.rememberScalingLazyListState
+import com.google.android.horologist.compose.navscaffold.ExperimentalHorologistComposeLayoutApi
 import com.google.android.horologist.compose.navscaffold.scrollableColumn
+import com.google.android.horologist.compose.tools.ExperimentalHorologistComposeToolsApi
+import com.google.android.horologist.compose.tools.WearSmallRoundDevicePreview
 import com.surrus.common.remote.Assignment
 import com.surrus.peopleinspace.R
 import com.surrus.peopleinspace.person.AstronautImage
@@ -111,7 +117,6 @@ fun PersonList(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun PersonView(
     modifier: Modifier = Modifier,
@@ -152,10 +157,7 @@ fun PersonView(
     }
 }
 
-@Preview(
-    device = "id:wearos_small_round",
-    showSystemUi = true
-)
+@WearSmallRoundDevicePreview
 @Composable
 fun PersonViewPreview() {
     PersonView(
@@ -168,10 +170,7 @@ fun PersonViewPreview() {
     )
 }
 
-@Preview(
-    device = "id:wearos_small_round",
-    showSystemUi = true
-)
+@WearSmallRoundDevicePreview
 @Composable
 fun PersonListSquarePreview() {
     PersonList(
@@ -194,10 +193,7 @@ fun PersonListSquarePreview() {
     )
 }
 
-@Preview(
-    device = "id:wearos_small_round",
-    showSystemUi = true
-)
+@WearSmallRoundDevicePreview
 @Composable
 fun PersonListSquareEmptyPreview() {
     PersonList(

wearApp/src/main/java/com/surrus/peopleinspace/person/PersonDetailsScreen.kt

@@ -1,3 +1,7 @@
+@file:OptIn(ExperimentalHorologistComposeToolsApi::class,
+    ExperimentalHorologistComposeLayoutApi::class
+)
+
 package com.surrus.peopleinspace.person
 
 import androidx.compose.foundation.background
@@ -16,7 +20,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.AutoCenteringParams
 import androidx.wear.compose.material.MaterialTheme
@@ -26,7 +29,10 @@ import androidx.wear.compose.material.ScalingLazyListState
 import androidx.wear.compose.material.Text
 import androidx.wear.compose.material.rememberScalingLazyListState
 import coil.compose.AsyncImage
+import com.google.android.horologist.compose.navscaffold.ExperimentalHorologistComposeLayoutApi
 import com.google.android.horologist.compose.navscaffold.scrollableColumn
+import com.google.android.horologist.compose.tools.ExperimentalHorologistComposeToolsApi
+import com.google.android.horologist.compose.tools.WearSmallRoundDevicePreview
 import com.surrus.common.remote.Assignment
 import com.surrus.peopleinspace.R
 import com.surrus.peopleinspace.list.PersonListTag
@@ -74,8 +80,7 @@ private fun PersonDetails(
             AstronautImage(
                 modifier = Modifier
                     .size(120.dp)
-                    .clip(CutCornerShape(30.dp))
-                ,
+                    .clip(CutCornerShape(30.dp)),
                 person = person
             )
         }
@@ -120,10 +125,7 @@ fun AstronautImage(
     )
 }
 
-@Preview(
-    device = "id:wearos_small_round",
-    showSystemUi = true
-)
+@WearSmallRoundDevicePreview
 @Composable
 fun PersonDetailsScreenPreview() {
     val person = remember {
@@ -143,10 +145,7 @@ fun PersonDetailsScreenPreview() {
     }
 }
 
-@Preview(
-    device = "id:wearos_small_round",
-    showSystemUi = true
-)
+@WearSmallRoundDevicePreview
 @Composable
 fun PersonDetailsScreenNotFoundPreview() {
     Box(modifier = Modifier.background(Color.Black)) {

wearApp/src/main/java/com/surrus/peopleinspace/previews/Previews.kt

@@ -0,0 +1,36 @@
+package com.surrus.peopleinspace.previews
+
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import com.surrus.common.remote.Assignment
+
+val NeilArmstrong = Assignment(
+    craft = "Apollo 11",
+    name = "Neil Armstrong",
+    personImageUrl = "https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTc5OTk0MjgyMzk5MTE0MzYy/gettyimages-150832381.jpg"
+)
+
+val BuzzAldrin = Assignment(
+    craft = "Apollo 11",
+    name = "Buzz Aldrin",
+    personImageUrl = "https://nypost.com/wp-content/uploads/sites/2/2018/06/buzz-aldrin.jpg?quality=80&strip=all"
+)
+
+val PreviewAstronauts = listOf(
+    NeilArmstrong,
+    BuzzAldrin,
+    NeilArmstrong,
+    BuzzAldrin,
+    NeilArmstrong,
+    BuzzAldrin
+)
+
+class AstronautSelections: PreviewParameterProvider<List<Assignment>> {
+    override val values: Sequence<List<Assignment>>
+        get() = (0..5).asSequence().map { PreviewAstronauts.take(it) }
+}
+
+@Preview(
+    backgroundColor = 0xff000000, showBackground = true, widthDp = 100, heightDp = 100
+)
+annotation class IconSizePreview

wearApp/src/main/java/com/surrus/peopleinspace/previews/WearPreviewDevices.kt

@@ -0,0 +1,70 @@
+/*
+ * 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.surrus.peopleinspace.previews;
+
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(
+    device = Devices.WEAR_OS_LARGE_ROUND,
+    showSystemUi = true,
+    backgroundColor = 0xff000000,
+    showBackground = true,
+    group = "Devices - Large Round",
+)
+@Preview(
+    device = Devices.WEAR_OS_SMALL_ROUND,
+    showSystemUi = true,
+    backgroundColor = 0xff000000,
+    showBackground = true,
+    group = "Devices - Small Round",
+)
+@Preview(
+    device = Devices.WEAR_OS_SQUARE,
+    showSystemUi = true,
+    backgroundColor = 0xff000000,
+    showBackground = true,
+    group = "Devices - Square",
+)
+public annotation class WearPreviewDevices
+
+@Preview(
+    device = Devices.WEAR_OS_SMALL_ROUND,
+    showSystemUi = true,
+    backgroundColor = 0xff000000,
+    showBackground = true,
+    group = "Devices - Small Round",
+)
+public annotation class WearSmallRoundDevicePreview
+
+@Preview(
+    device = Devices.WEAR_OS_LARGE_ROUND,
+    showSystemUi = true,
+    backgroundColor = 0xff000000,
+    showBackground = true,
+    group = "Devices - Large Round",
+)
+public annotation class WearLargeRoundDevicePreview
+
+@Preview(
+    device = Devices.WEAR_OS_SQUARE,
+    showSystemUi = true,
+    backgroundColor = 0xff000000,
+    showBackground = true,
+    group = "Devices - Square",
+)
+public annotation class WearSquareDevicePreview